Highcharts not rendering in jQuery tooltip
I am not sure if this is a bug or expected behaviour. I am trying to render a Highchart inside a jQuery tooltip, and it's not working. The chart fails to render. I have replicated the issue in this jsfiddle.
I am getting error code 13 even though you will see from the jsfiddle I have properly referenced the container div:
This error occurs if the chart.renderTo option is misconfigured so that Highcharts is unable to find the HTML element to render the chart in.
Any ideas as to why the chart is not appearing in the jQuery tooltip?
Edit
How can we generalize the answer below so that the ID of the hovered element is passed directly to the highcharts function? I have tried the following, but it does not work. I think it's because the highcharts fires before the ID is determined?
$('body').tooltip({
open: function() {
var widget = $(this).data("ui-tooltip");
var widget = $(widget.element[0]).attr("id")
Highcharts.chart(widget, {
chart: {
type: 'bar'
}, {.....etc}
});
});
The issue is because the #container element only exists in the DOM after the element which triggers the tooltip has been hovered over. As you're trying to define the HighChart before this occurs, you get the error.
To fix this you can use the open event of the tooltip() library to define the chart after the tooltip element has been injected in to the DOM:
$(function() {
$(document).tooltip({
open: function() {
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2012',
data: [1052, 954, 4250, 740, 38]
}]
});
}
});
});.foo {
position: fixed;
bottom: 0;
left: 0;
background: lightgray;
width: 100%;
}
#container {
width: 500px;
height: 500px;
background: red;
}
label {
display: inline-block;
width: 5em;
}
.ui-tooltip {
position: absolute;
background: #f9a235;
color: #fff;
padding: 6px 0px;
border-radius: 25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<p>
<label for="age">Your age:</label>
<input id="age" title="<div id='container'></div>" />
</p>
<p>Hover the field to see the tooltip.</p>
<div class="foo">
About this SO Question:
<a href='http://stackoverflow.com/q/23498641/1366033'>How do I make rounded Jquery UI tooltips?</a><br/> Documentation: <a href='http://jqueryui.com/tooltip/'>jQuery - UI - Tooltips</a><br/>
</div>