jQuery 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
$(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
<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
<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
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;
If you have technical questions, please create a support ticket in the DevExpress Support Center.