I am currently facing an issue where I am trying to display the content of a <div id="right"> when hovering the mouse over another div. The #right div contains a graph from Angular-charts ().
Below is my jQuery code:
<div>
<div>
<canvas id="doughnut" class="chart chart-doughnut" data="data" labels="labels" legend="true" click="onClick">
</canvas>
</div>
<h3>Some text</h3>
</div>
I attempted to make it so that the content appears in #right when hovering over the other div using jQuery.
$(function(){
$('#some_other_div').on('mouseover', function(){
$('#right').html('<div><canvas id="doughnut" class="chart chart-doughnut" data="data" labels="labels" legend="true" click="onClick"></canvas></div><h3>Some text</h3>');
})
});
However, when I hover over some_other_div, only a blank space and Some text are displayed at the bottom. I have confirmed that the graph functions properly when implemented directly in the HTML. The issue seems to arise only when using .html method.
Is there a solution to this problem? Thank you.