This is a migrated thread and some comments may be shown as answers.

Hide series tooltip if mouse hover out data point

5 Answers 346 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 11 Jan 2019, 04:57 PM

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

 

5 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 14 Jan 2019, 12:31 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Peter
Top achievements
Rank 1
answered on 14 Jan 2019, 05:20 PM

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

0
Accepted
Tsvetina
Telerik team
answered on 15 Jan 2019, 01:25 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Peter
Top achievements
Rank 1
answered on 15 Jan 2019, 01:59 PM

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

0
Peter
Top achievements
Rank 1
answered on 15 Jan 2019, 02:24 PM

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;
     });
 },
Tags
Charts
Asked by
Peter
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Peter
Top achievements
Rank 1
Share this question
or