P. Ommer P. Ommer - 2 months ago 40
Javascript Question

Highcharts: Tooltip delay before display

On my highchart i need a delay before the series tooltip is displayed.

I defined a new refresh function with a timer to realize it. If the timer is ready i check if the mouse position. If it moved not that much the tooltip should appear.

function (H) {
var timer = [];
var mousePosition = {
x: 0,
y: 0
};

window.addEventListener("mousemove", function (event) {
mousePosition.x = event.pageX;
mousePosition.y = event.pageY;
});

var getMousePositionX = function () {
return mousePosition.x;
};

var clearTimer = function () {
timer = [];
}

H.wrap(H.Tooltip.prototype, 'refresh', function (proceed) {
var mousePosX = getMousePositionX();
var delayForDisplay = this.chart.options.tooltip.delayForDisplay ? this.chart.options.tooltip.delayForDisplay : 1000;
timer[timer.length+1] = window.setTimeout(function () {
var currMousePosX = getMousePositionX();
if ((mousePosX >= currMousePosX - 5 && mousePosX <= currMousePosX + 5)) {
this.proceed.apply(this.tooltip, this.refreshArguments);
clearTimer();
}
}.bind({
refreshArguments: Array.prototype.slice.call(arguments, 1),
chart: this.chart,
tooltip: this,
clearTimer: clearTimer,
proceed: proceed
}), delayForDisplay);
});
};


The problem I have is, that the hover holos have also a delay.

Here is a sample: JSFiddle

Any solutions for this issue?

Answer

You can make new tooltip basing on your standard Highcharts tooltip and show it on your mouseover with some timeout:

load: function() {
  chart = this;
  this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
  this.tooltip.label.element.remove();
}


    point: {
      events: {
        mouseOver: function(e) {
          var i = this.x;
          points = [];
          Highcharts.each(this.series.chart.series, function(s) {
            Highcharts.each(s.data, function(p) {
              if (p.x === i) {
                points.push(p)
              }
            })
          });
          myTooltip = chart.myTooltip;
          setTimeout(function() {
            myTooltip.refresh(points, e)
          }, 1000)

        }, mouseOut: function() {
        setTimeout(function() {
        chart.myTooltip.hide();
          }, 1000)
        }
      }
    }

Here you can see an example how it can work: http://jsfiddle.net/az39das8/