Hide chart tooltips when leave series

[Rohan]

Right now tooltips shows on entire chart div but i want two show tooltips on the specific bar only if leave that bar then tooltips will hide but now its showing leaving bar also. So i want to destroy the tooltips once leave the chart bar - series.

I try seriesOver and seriesLeave but its not working

My code

if (response.Success) {
$('#Campaigns').val(response.Campaigns);
$('.spotterUploadProcessFooter .submitButton:visible').removeClass('k-state-disabled');
if (response.AllowNextStep) {
$('li[data-wzform="BudgetDistribution"]').removeClass('k-state-disabled');
}
else {
$('li[data-wzform="BudgetDistribution"]').addClass('k-state-disabled');
$('.spotterUploadProcessFooter .submitButton:visible').text('Finish Import');
}
var tabStrip = $('#uploadSummaryCharts').data('kendoTabStrip');
for (var i = 0; i < response.CampaignUploadSummaryItems.length; i++) {
var template = kendo.template($('#uploadSummaryChartTemplate').html());
var previewHtml = template(response.CampaignUploadSummaryItems[i]);
tabStrip.append({
text: response.CampaignUploadSummaryItems[i].CampaignName + '(' + response.CampaignUploadSummaryItems[i].CampaignCode + ')',
content: previewHtml
});
var chartOptions = getChartOptions('Campaign ' + response.CampaignUploadSummaryItems[i].CampaignName + '(' + response.CampaignUploadSummaryItems[i].CampaignCode + ')');
if (response.CampaignUploadSummaryItems[i].HasCampaignCostDataUploadSummary) {
var chartDataOptions = {
dataSource: { data: response.CampaignUploadSummaryItems[i].CampaignCostDataUploadSummary },
categoryAxis: [{
field: 'Station',
majorGridLines: { visible: false },
line: { visible: true },
minorGridLines: { visible: false },
labels: { rotation: 'auto' }
}],
series: [{ field: 'OldGrossBudget', name: 'Old Gross Budget', axis: 'left' },
{ field: 'NewGrossBudget', name: 'New Gross Budget', axis: 'left' }],
seriesLeave: function (e) {
    this.hideTooltip();
},
seriesOver: function (e) {
    $(e.element).parent().parent().on("mouseleave", function () {
        $('#costChart' + response.CampaignUploadSummaryItems[i].CampaignID).data('kendoChart').hideTooltip();
    });
},
valueAxis: { name: 'left', title: { text: 'Gross Budget' }, labels: { format: '{0:#,#.##}' } },
legend: { item: { visual: chartLegend } },
tooltip: { visible: false },
seriesHover: function (e) {
var htmlData = getToolTipTemplate(e);
var tdClass = e.series.name.replace(/[^A-Za-z0-9]+/g, '');
onSeriesHover(tdClass, htmlData, e.sender.element.attr('id'));
$(e.element).parent().parent().on("mouseleave", function () {
    $('#costChart' + response.CampaignUploadSummaryItems[i].CampaignID).data('kendoChart').hideTooltip();
});
}
};
$.extend(true, chartOptions, chartDataOptions);
$('#costChart' + response.CampaignUploadSummaryItems[i].CampaignID).kendoChart(chartOptions);
}
if (response.CampaignUploadSummaryItems[i].HasCampaignSpotDataUploadSummary) {
var chartDataOptions = {
dataSource: { data: response.CampaignUploadSummaryItems[i].CampaignSpotDataUploadSummary },
series: [{ field: 'OldImpacts', name: 'Old Impacts', type: 'column', axis: 'left' },
{ field: 'NewImpacts', name: 'New Impacts', type: 'column', axis: 'left' },
{ field: 'OldSpotCounts', name: 'Old Spot Counts', type: 'line', axis: 'right' },
{ field: 'NewSpotCounts', name: 'New Spot Counts', type: 'line', axis: 'right' }
],
valueAxis: [{ name: 'left', title: { text: 'Impacts' }, labels: { format: '{0:#,#.##}' } },
{ name: 'right', title: { text: 'Spot Count' }, labels: { format: '{0:#,#}' } }],
legend: { item: { visual: chartLegend } },
categoryAxis: {
axisCrossingValue: [0, 10000],
field: 'DateString',
majorGridLines: { visible: false },
line: { visible: true },
minorGridLines: { visible: false },
labels: { rotation: 'auto' }
},
tooltip: { visible: false },
seriesHover: function (e) {
var htmlData = getToolTipTemplate(e);
var tdClass = e.series.name.replace(/[^A-Za-z0-9]+/g, '');
onSeriesHover(tdClass, htmlData, e.sender.element.attr('id'));
}
}
$.extend(true, chartOptions, chartDataOptions);
$('#spotChart' + response.CampaignUploadSummaryItems[i].CampaignID).kendoChart(chartOptions);
}
}
tabStrip.select('li:first');
}
else {
showErrorNotification(response.ErrorMessage);
}
}, function () {
hidePreload();
});

[Alex Hajigeorgieva]

Hello, Rohan,

You can use the seriesLeave event to hide the tooltip with the hideTooltip() method when the point value meets a certain condition and show it on seriesOver as required with theshowTooltip() method:

http://dojo.telerik.com/uSEYoLUH/3

seriesOver: function(e){
          var seriesValue = e.value;
          e.sender.showTooltip(function(point) {
            if(seriesValue === point.value && point.value === 2){
              return true;
            }
          });
        },
        seriesLeave: function(e){
         if(e.value==2){
          e.sender.hideTooltip();
         }
        }

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Rohan]

@Alex Hajigeorgieva the tooltips is custom not a kendo tooltips so how to hide custom tooltips 

[Rohan]

i want to hide after the series live not per the value 

[Alex Hajigeorgieva]

Hi, Rohan,

The example I shared with you followed the initial requirement:

i want to show tooltips on the specific bar only if leave that bar then tooltips will hide

The example used the chart methods checking on the value of the serie whether a tooltip should be shown or not. 

However, if you are using a custom tooltip, then the chart may have no knowledge of it and so the chart methods will do nothing. To be able to assist you further, can you share a simple runnable example, updating the Dojo with how the custom tooltip is created in your application.

Meanwhile, I created another example that shows а custom toolti on seriesOver and hides it on seriesLeave for every other category. You may decide on your own condition, this is just an example:

https://dojo.telerik.com/@bubblemaster/OlApULiQ

Regards,
Alex Hajigeorgieva
Progress Telerik