All docs
V19.1
20.2
20.1
19.2
19.1
18.2
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.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.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

Options 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 option, 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
    ],
    // ...
})

View Demo

See Also