javascript - Put chart.js chart inside JQuery tooltip? -

i display chart.js's bar chart inside tooltip. possible?

$(function() {    $( document ).tooltip({      track: true,      content:function () {var temp = $(this).prop('title');             temp = thebigarray[temp] //this json data container each sentence              var barchartdata = {                 labels : ["future","present","past"],                 datasets : [                     {                         fillcolor : "rgba(151,187,205,0.5)",                         strokecolor : "rgba(151,187,205,0.8)",                         highlightfill : "rgba(151,187,205,0.75)",                         highlightstroke : "rgba(151,187,205,1)",                         data : [temp[2], temp[3], temp[4]]                     }                 ]              }             var ctx = document.getelementbyid("canvas").getcontext("2d");             var mytable = new chart(ctx).bar(barchartdata, {                 responsive : false             });             return  '<canvas id="canvas"></canvas>';     }   }); 

when "canvas" under , , displayed on html, works fine. but, fails show inside tooltip javascript when return content of tooltip div.

you need create canvas element before call getelementbyid on it. also, canvas element needs sized chart.js work properly.

use this

$(function() {     $( document ).tooltip({         track: true,         open: function (event, ui) {             $('.ui-tooltip-content > div').append($("#canvas"))         },         content: function () {             var temp = $(this).prop('title');             var temp = thebigarray[temp] //this json data container each sentence              var barchartdata = {                 labels: ["future", "present", "past"],                 datasets: [                     {                         fillcolor: "rgba(151,187,205,0.5)",                         strokecolor: "rgba(151,187,205,0.8)",                         highlightfill: "rgba(151,187,205,0.75)",                         highlightstroke: "rgba(151,187,205,1)",                         data: [temp[2], temp[3], temp[4]]                     }                 ]             }              $('body').append($("<canvas id='canvas' width='200' height='100'></canvas>"))             var ctx = document.getelementbyid("canvas").getcontext("2d");             var mytable = new chart(ctx).bar(barchartdata, {                 responsive: false,                 animation: false             });              return '<div></div>';         }     }) }); 

with css

<style>     body > #canvas {         position: fixed;         visibility: hidden;     } </style> 

---