One Reply to “Google Charts Advanced Tooltip Placement”
Hi Bill,
Thank you for the post.
You helped me resolve a similar issue with the Google Charts Timelines not positioning tooltips correctly when in a scrolling container.
The final solution I arrived at was to just reposition the tooltip based on the mouse cursor position, and I am now adding some improvements to adjust for tooltip size and container borders.
Hi Bill,
Thank you for the post.
You helped me resolve a similar issue with the Google Charts Timelines not positioning tooltips correctly when in a scrolling container.
The final solution I arrived at was to just reposition the tooltip based on the mouse cursor position, and I am now adding some improvements to adjust for tooltip size and container borders.
Cheers,
Martin
var mouseX;
var mouseY;
$(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY
});
google.visualization.events.addListener(chart, ‘onmouseover’, function (e) {
setTooltipPosition(chart, dataTable, e);
});
function setTooltipPosition(chart, dataTable, event) {
if (event.row === undefined) return;
const row = event.row;
const tooltip = $(chart.container).find(‘.google-visualization-tooltip’);
if (tooltip.length) {
tooltip.css({ ‘top’: mouseY – 120, ‘left’: mouseX – 10 });
}
};