Integrate an interactive chart in a tooltip with bootstrap 4,tippy.js and chart.js

<div id="template" style="display: none;"><canvas width="150" height="150" data-rendered="false"></canvas><button type="button" class="btn btn-link">Click here to see the details</button></div>
<span id="tooltip">Hover over me to see a cool chart</span>
<div id="details" class="d-none col"><h1>Chart details</h1><canvas width="400" height="400" data-rendered="false"></canvas></div>
function renderChart() {var canvas = $('canvas[data-rendered="false"]:visible');canvas.data('rendered', 'true');var ctx = canvas.get();var myPieChart = new Chart(ctx, {  type: 'pie',  data: {  datasets: [{  data: [10, 20, 30]  }],  labels: [    'Red',    'Yellow',    'Blue'    ]  }});}
function showDetails() {  $('#details').removeClass('d-none');  setTimeout(renderChart, 500);}
const template = document.getElementById('template');tippy('#tooltip', {  content: template.innerHTML,  allowHTML: true,  interactive: true,  onShown(instance) {     renderChart();     const $button = $('button');     $button.click(() => {     instance.hide();     showDetails();    });  },});

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store