2

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/

Mobeen Sarwar
  • 514
  • 5
  • 23
cattyWashington
  • 81
  • 1
  • 10
  • Hi @cattyWashington, It will be much easier if you use the default tooltip next to the point and a custom one for the one in the corner. Example: http://jsfiddle.net/BlackLabel/6m4e8x0y/4911/ – ppotaczek Mar 16 '20 at 09:32
  • Hi @ppotaczek, The problem is i have multiple charts and synchronize it with cross hair, this mouseOver will work only if i mouseover on particular series. So having a tooltip positioned at the corner makes it easy in case of synchronized charts and have mouseOver only if i want on a particular point. – cattyWashington Mar 16 '20 at 10:17

1 Answers1

1

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

ppotaczek
  • 36,341
  • 2
  • 14
  • 24