Vue Sankey - Show and Hide a Tooltip

Tooltips can be invoked programmatically by calling a Node or Link object's showTooltip() method. You can access these objects with API methods or in event handlers, such as onNodeClick and onLinkClick, onNodeHoverChanged and onLinkHoverChanged. The event handlers are demonstrated in the following code. To hide the tooltip, call the UI component instance's hideTooltip() method.

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        tooltip: { enabled: false },
        // Shows the tooltip only when a sankey link is clicked
        onLinkClick: function(e) {
            e.target.showTooltip();
        },
        // Hides the tooltip when the sankey link is no longer hovered over or pressed
        onLinkHoverChanged: function(e) {
            if (!e.target.isHovered()) {
                e.component.hideTooltip();
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ...
    (onLinkClick)="sankey_onLinkClick($event)"
    (onLinkHoverChanged)="sankey_onLinkHoverChanged($event)">
    <dxo-tooltip
        [enabled]="false">
    </dxo-tooltip>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // Shows the tooltip only when a sankey link is clicked
    sankey_onLinkClick (e) {
        e.target.showTooltip();
    },
    // Hides the tooltip when the sankey link is no longer hovered over or pressed
    sankey_onLinkHoverChanged (e) {
        if (!e.target.isHovered()) {
            e.component.hideTooltip();
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey ... >
        <DxTooltip
            :enabled="false"
            @link-click="onLinkClick"
            @link-hover-changed="onLinkHoverChanged"
        />
    </DxSankey>
</template>

<script>
import DxSankey, { DxTooltip } from 'devextreme-vue/sankey';

export default {
    components: {
        DxSankey,
        DxTooltip
    },
    methods: {
        // Shows the tooltip only when a sankey link is clicked
        onLinkClick(e) {
            e.target.showTooltip();
        },
        // Hides the tooltip when the sankey link is no longer hovered over or pressed
        onLinkHoverChanged(e) {
            if (!e.target.isHovered()) {
                e.component.hideTooltip();
            }
        }
    }
}
</script>
React
App.js
import React from 'react';
import Sankey, { Tooltip } from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey ... >
                <Tooltip
                    enabled={false}
                    onLinkClick={this.onLinkClick}
                    onLinkHoverChanged={this.onLinkHoverChanged}
                />
            </Sankey>
        )
    }
    // Shows the tooltip only when a sankey link is clicked
    onLinkClick(e) {
        e.target.showTooltip();
    },
    // Hides the tooltip when the sankey link is no longer hovered over or pressed
    onLinkHoverChanged(e) {
        if (!e.target.isHovered()) {
            e.component.hideTooltip();
        }
    }
}

export default App;