Skip to content

Instantly share code, notes, and snippets.

@Bjego

Bjego/index.html

Created March 10, 2021 10:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Bjego/24b30a7c690642eaac150822e49c5335 to your computer and use it in GitHub Desktop.
Save Bjego/24b30a7c690642eaac150822e49c5335 to your computer and use it in GitHub Desktop.
Download ZIP
Integrate an interactive chart in a tooltip with bootstrap 4,tippy.js and chart.js
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6.3.1/dist/tippy-bundle.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<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>
<div id="details" class="d-none col">
<h1>Chart details</h1>
<canvas width="400" height="400" data-rendered="false"></canvas>
</div>
</div>
<script>
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();
});
},
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment