DevExtreme Vue - 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.

<template> 
    <DxChart ...
        @tooltip-shown="onTooltipShown" 
        @tooltip-hidden="onTooltipHidden">
    </DxChart>
</template>
 
<script>
import DxChart from 'devextreme-vue/chart';
 
export default {
    components: {
        DxChart
    },
    methods: {
        onTooltipShown (e) {
            const point = e.target;
            // Handler of the "tooltipShown" event
        },
        onTooltipHidden (e) {
            const point = e.target;
            // Handler of the "tooltipHidden" event
        }
    }
}
</script>

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