DevExtreme jQuery/JS - Handle Tooltip Events

When a tooltip becomes shown or hidden, the Chart fires the tooltipShown or tooltipHidden event that you can handle with a function. If the handling function is not going to be changed during the lifetime of the widget, assign it to the onTooltipShown or onTooltipHidden option respectively, when you configure the widget.

$(function() {
    $("#chartContainer").dxChart({
        // ...
        onTooltipShown: function (e) {
            var point = e.target;
            // Handler of the "tooltipShown" event
        },
        onTooltipHidden: function (e) {
            var point = e.target;
            // Handler of the "tooltipHidden" event
        }
    });
});

If you are going to change the event handlers at runtime or if you need to attach several handlers to a single event, subscribe to this event using the on(eventName, eventHandler) method. This approach is more typical of jQuery.

var tooltipShownHandler1 = function (e) {
    var point = e.target;
    // First handler of the "tooltipShown" event
};
 
var tooltipShownHandler2 = function (e) {
    var point = e.target;
    // Second handler of the "tooltipShown" event
};
 
$("#chartContainer").dxChart("instance")
    .on("tooltipShown", tooltipShownHandler1)
    .on("tooltipShown", tooltipShownHandler2);

See Also

• Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• Chart API Reference