I am trying to have a highchart
spline chart with tooltip
positioned to the right corner
and have another tooltip on mouseover
specific points. So basically I would like to show Two tooltips for some points. So far i was able to do that only on click
event where we the event information with mouse
coordinates with respect to page. Is there a way we can show two tooltips
for same point? I want one tooltip
to be positioned at the right corner
and the other one
next to the point as shown in the below JSfiifle
.
"point": {
"events": {
"mouseOver": function(e) {
var selectedPoints = $('#' + this.series.chart.renderTo.id).highcharts().getSelectedPoints();
if (selectedPoints.length) {
selectedPoints[0].select();
}
if (e.target.marker && !e.target.marker.radius) {
return;
}
},
"mouseOut": function(e) {
util.hideBandInsightsPopup();
},
"click": function(e) {
if (e.point && e.point.marker && !e.point.marker.radius) {
return;
}
$("#factor-popup-content").html("my popup content");
var yPixel = e.pageY + 5;
var currentPointHeight = yPixel + $("#factor-popup").height();
if ($("#factor-popup").height() < 300 && currentPointHeight > $(window).height()) {
var adjustHeight = currentPointHeight - $(window).height() + 30;
yPixel = yPixel - adjustHeight;
}
$("#factor-popup").css({
'position': 'fixed',
'top': (yPixel) + 'px',
'left': (e.pageX) + 5 + 'px'
}).show();
}
}
}
Here is the Jsfiddle
http://jsfiddle.net/zLpakfj2/4/
The original event is not passed to the mouseOver
event, but you can add it for example to a point in this way:
(function(H) {
H.wrap(
H.Pointer.prototype,
'getHoverData',
function(
proceed,
existingHoverPoint,
existingHoverSeries,
series, isDirectTouch,
shared,
e
) {
var result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if (result.hoverPoint) {
result.hoverPoint.originalEvent = e;
}
return result;
});
}(Highcharts));
Live demo: http://jsfiddle.net/BlackLabel/y18h30t4/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts