Vue Funnel - Show and Hide a Tooltip

Each funnel item allows you to show its tooltip programmatically by calling the showTooltip() method of the Item object. You can access this object with the API methods or in item event handlers, such as onItemClick, onHoverChanged, etc. The latter is demonstrated in the following code. To hide the tooltip, call the hideTooltip() method of the UI component's instance.

jQuery
JavaScript
$(function() {
    $("#funnelContainer").dxFunnel({
        // ...
        // Shows the tooltip only when a user clicks a funnel item
        onItemClick: function (e) {
            e.item.showTooltip();
        },
        // Hides the tooltip once the user moves the pointer away from the funnel item
        onHoverChanged: function (e) {
            if (!e.item.isHovered()) {
                e.component.hideTooltip();
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-funnel ...
    (onItemClick)="onItemClick($event)"
    (onHoverChanged)="onHoverChanged($event)">
</dx-funnel>
import { DxFunnelModule } from "devextreme-angular";
// ...
export class AppComponent {
    // Shows the tooltip only when a user clicks a funnel item
    onItemClick (e) {
        e.item.showTooltip();
    },
    // Hides the tooltip once the user moves the pointer away from the funnel item
    onHoverChanged (e) {
        if (!e.item.isHovered()) {
            e.component.hideTooltip();
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxFunnelModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxFunnel
        @item-click="onItemClick"
        @hover-changed="onHoverChanged"
    />
</template>

<script>
import DxFunnel from 'devextreme-vue/funnel';

export default {
    components: {
        DxFunnel
    },
    methods: {
        // Shows the tooltip only when a user clicks a funnel item
        onItemClick (e) {
            e.item.showTooltip();
        },
        // Hides the tooltip once the user moves the pointer away from the funnel item
        onHoverChanged (e) {
            if (!e.item.isHovered()) {
                e.component.hideTooltip();
            }
        }
    }
}
</script>
React
App.js
import React from 'react';
import Funnel from 'devextreme-react/funnel';

class App extends React.Component {
    render() {
        return (
            <Funnel
                onItemClick={this.onItemClick}
                onHoverChanged={this.onHoverChanged}
            />
        );
    }
    // Shows the tooltip only when a user clicks a funnel item
    onItemClick (e) {
        e.item.showTooltip();
    },
    // Hides the tooltip once the user moves the pointer away from the funnel item
    onHoverChanged (e) {
        if (!e.item.isHovered()) {
            e.component.hideTooltip();
        }
    }
}

export default App;
See Also