All docs
V20.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Overview

A tooltip is a small pop-up rectangle that displays information about a sankey node or link when it is hovered over or pressed.

Sankey Tooltip

Properties that configure tooltips are collected in the tooltip object. If you want to customize a specific tooltip, assign a function to the customizeNodeTooltip or customizeLinkTooltip property, depending on whether the tooltip belongs to a sankey node or link. This function should return a configuration object for the tooltip you want to customize.

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        tooltip: {
            color: "yellow",
            // Tooltips of all nodes with outgoing weight less than 1 turn red
            // Other tooltips remain yellow
            customizeNodeTooltip: function(nodeInfo) {
                return nodeInfo.weightOut < 1 ? { color: "red" } : { }
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ... >
    <dxo-tooltip
        color="yellow"
        [customizeNodeTooltip]="sankey_customizeNodeTooltip">
    </dxo-tooltip>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // Tooltips of all nodes with outgoing weight less than 1 turn red
    // Other tooltips remain yellow
    sankey_customizeNodeTooltip (nodeInfo) {
        return nodeInfo.weightOut < 1 ? { color: "red" } : { }
    }
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey ... >
        <DxTooltip
            color="yellow"
            :customize-node-tooltip="customizeNodeTooltip"
        />
    </DxSankey>
</template>

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

export default {
    components: {
        DxSankey,
        DxTooltip
    },
    methods: {
        // Tooltips of all nodes with outgoing weight less than 1 turn red
        // Other tooltips remain yellow
        customizeNodeTooltip(nodeInfo) {
            return nodeInfo.weightOut < 1 ? { color: "red" } : { }
        }
    }
}
</script>
React
App.js
import React from 'react';
import Sankey, { Tooltip } from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey ... >
                <Tooltip
                    color="yellow"
                    customizeNodeTooltip={this.customizeNodeTooltip}
                />
            </Sankey>
        )
    }

    // Tooltips of all nodes with outgoing weight less than 1 turn red
    // Other tooltips remain yellow
    customizeNodeTooltip(nodeInfo) {
        return nodeInfo.weightOut < 1 ? { color: "red" } : { }
    }
}

export default App;

View Demo

See Also