Accepted answer

you can set the popover options in javascript directly, and you can also listen to events.

the important option here is html: true which enables placing html within the popover content, otherwise shown as a string.

the content option documentation states:

default content value if data-content attribute isn't present.

then, listening to the event, we get the previously placed <canvas> with jquery and pass it as the context for a new chart.js instance.

  html: true,
  content: '<canvas id="mychart" width="400" height="400"></canvas>',
}).on('', function() {

  new chart($('#mychart'), {
    // the type of chart we want to create
    type: 'line',

    // the data for our dataset
    data: {
      labels: ["january", "february", "march", "april", "may", "june", "july"],
      datasets: [{
        label: "my first dataset",
        backgroundcolor: 'rgb(255, 99, 132)',
        bordercolor: 'rgb(255, 99, 132)',
        data: [0, 10, 5, 2, 20, 30, 45],

    // configuration options go here
    options: {}
<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="good vs. evil winrate" data-placement="bottom">who's winning?</button>

<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>
<script src=""></script>

Related Query