Hide series tooltip if mouse hover out data point

[Peter]

Hi,

I can show a tooltip, if the mouse hover over a data point: https://dojo.telerik.com/EWoPODum

The tooltip is closed, if the mouse leave the chart or if I click in the chart outside of the bars.

How can I avoid the click? The tooltip should hide if the mouse leave the bar.

Peter

 

[Tsvetina]

Hi Peter,

You can use the Chart seriesLeave event to detect when the mouse left the bar and hide the tooltip explicitly:

seriesLeave: function(e){
  this.hideTooltip();
}

You can test this in the updated example here:
https://dojo.telerik.com/EWoPODum/5

Regards,
Tsvetina
Progress Telerik

[Peter]

Hello Tsvetina,

this works, but there is an issue: If I hover the same bar again, the tooltip is not shown again. I have to hover an other bar or left the chart region and then hover the first bar again.

Can you fix this, please?

Best regards,

Peter

[Tsvetina]

Hello Peter,

You can fix this by explicitly showing the tooltip on seriesOver event:

seriesLeave: function(e){
  this.hideTooltip();
},
seriesOver: function(e){
  var category = e.category;
  var value = e.value;
  this.showTooltip(function(point) {
    return point.value == value && point.category == category;
  });
}

https://dojo.telerik.com/EWoPODum/6

The difference in behavior is caused by the fact that the tooltip is tied to the seriesHover event, which does not fire if you move the mouse over the current data point again, without hovering a different data point before that.

Regards,
Tsvetina
Progress Telerik

[Peter]

Hello Tsvetina,

thank you very much. Because I have also some series without visible tooltip, I include a visible check:

seriesOver: function (e) {
    if (e.series.tooltip.visible) {
        var category = e.category;
        var value = e.value;
        this.showTooltip(function (point) {
            return point.value == value && point.category == category;
        });
    }
},

In the Chrome Debugger I see, that always is defined: e.series.tooltip.visible

Best regards,

Peter

[Peter]

correction:

seriesOver: function (e: any) {
     var category = e.category;
     var value = e.value;
     this.showTooltip(function (point) {
         return point.options.tooltip.visible && point.value == value && point.category == category;
     });
 },