tooltip - API Reference - Kendo UI Sankey

New to Kendo UI for jQuery? Start a free 30-day trial

configuration

The tooltip configuration options.

Object

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
    $("#sankey").kendoSankey({
        data: {
            nodes: [
                { id: 1, label: { text: "Node 1" } },
                { id: 2, label: { text: "Node 2" } },
                { id: 3, label: { text: "Node 3" } }
            ],
            links: [
                { sourceId: 1, targetId: 3, value: 2 },
                { sourceId: 2, targetId: 3, value: 1 }
            ]
        },
        tooltip: {
            appendTo: "body",
            delay: 1000,
            followPointer: false,
            linkTemplate: "#= dataItem.source.label.text # -> #= dataItem.target.label.text # #= value #",
            nodeTemplate: "#= dataItem.label.text # #= value #",
            offset: 12
        }
    });
</script>

tooltip.appendTo

String|Element

The element to which the tooltip will be appended.

Default: document.body

<div id="sankey" style="width: 500px; height: 200px;"></div>
<div id="tooltip-container"></div>
<script>
$("#sankey").kendoSankey({
    tooltip: {
        appendTo: "#tooltip-container",
        nodeTemplate: (data) => `Node: ${data.label.text}`
    },
    data: {
        nodes: [
            { id: 1, label: { text: "Node 1" } },
            { id: 2, label: { text: "Node 2" } }
        ],
        links: [
            { sourceId: 1, targetId: 2, value: 1 }
        ]
    }
});
</script>

tooltip.delay

Number

The delay in milliseconds before the tooltip is displayed.

Default: 1000

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
$("#sankey").kendoSankey({
    tooltip: {
        delay: 500,
        nodeTemplate: (data) => `Node: ${data.label.text}`
    },
    data: {
        nodes: [
            { id: 1, label: { text: "Node 1" } },
            { id: 2, label: { text: "Node 2" } }
        ],
        links: [
            { sourceId: 1, targetId: 2, value: 1 }
        ]
    }
});
</script>

tooltip.followPointer

Boolean

If set to true, the tooltip will follow the mouse pointer.

Default: false

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
$("#sankey").kendoSankey({
    tooltip: {
        followPointer: true,
        nodeTemplate: (data) => `Node: ${data.label.text}`
    },
    data: {
        nodes: [
            { id: 1, label: { text: "Node 1" } },
            { id: 2, label: { text: "Node 2" } }
        ],
        links: [
            { sourceId: 1, targetId: 2, value: 1 }
        ]
    }
});
</script>

tooltip.linkTemplate

String|Function

The template which renders the tooltip content for the links.

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
$("#sankey").kendoSankey({
    tooltip: {
        linkTemplate: (data) => `Link Value: ${data.value}`
    },
    data: {
        nodes: [
            { id: 1, label: { text: "Node 1" } },
            { id: 2, label: { text: "Node 2" } }
        ],
        links: [
            { sourceId: 1, targetId: 2, value: 25 }
        ]
    }
});
</script>

tooltip.nodeTemplate

String|Function

The template which renders the tooltip content for the nodes.

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
$("#sankey").kendoSankey({
    tooltip: {
        nodeTemplate: (data) => `Node: ${data.label.text} (Value: ${data.value})`
    },
    data: {
        nodes: [
            { id: 1, label: { text: "Node 1" } },
            { id: 2, label: { text: "Node 2" } }
        ],
        links: [
            { sourceId: 1, targetId: 2, value: 25 }
        ]
    }
});
</script>

tooltip.offset

Number

The distance between the tooltip and the mouse pointer in pixels.

Default: 12

<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
$("#sankey").kendoSankey({
    tooltip: {
        offset: 20,
        nodeTemplate: (data) => `Node: ${data.label.text}`
    },
    data: {
        nodes: [
            { id: 1, label: { text: "Node 1" } },
            { id: 2, label: { text: "Node 2" } }
        ],
        links: [
            { sourceId: 1, targetId: 2, value: 1 }
        ]
    }
});
</script>