score:5

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 shown.bs.popover event, we get the previously placed <canvas> with jquery and pass it as the context for a new chart.js instance.

$('[data-toggle="popover"]').popover({
  html: true,
  content: '<canvas id="mychart" width="400" height="400"></canvas>',
}).on('shown.bs.popover', 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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.bundle.min.js"></script>


Related Query

More Query from same tag