I am looking to display a highchart inside a popover.
Check out my code in this jsfiddle http://jsfiddle.net/hfiddle/abpvnys5/47/. Here is the HTML:
<ul class="stat_list" style="float: left;">
<a data-toggle="popover" data-trigger="hover"
data-popover-content="#details"
data-placement="bottom" >
<li>hello</li>
</a>
</ul>
<div id='details' style="display: none">
<div class="gages" >
<div id="test_column_chart" style="height:100px; width:200px" ></div>
<div class="row">
<div class="ss" style="">
asdfasdfasdfasdf
</div>
</div>
</div>
</div>
Here is the JavaScript part:
$(function () {
get_column_chart(['asdf', 'asdf'], [33, 10],'test');//function for chart
$("[data-toggle=popover]").popover({
html: true,
content: function () {
var content = $(this).attr('data-popover-content');
return $(content).children(".gages").html();
}
})
})
Everything works fine with Bootstrap 3 here: http://jsfiddle.net/hfiddle/3vr4p9ua/22/
Any ideas on making it work in Bootstrap 4?
Thank you.