tooltip - API Reference - Kendo UI Diagram

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

configuration

Defines the tooltip settings for the diagram.

Boolean|Object

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    tooltip: {
        delay: 500
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Hover over me" } }
    ]
});
</script>

tooltip.connectionTemplate

Function

Defines the tooltip that will be shown when hovering over a connection.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    tooltip: {
        connectionTemplate: (e)=> `T: ${e.dataItem.label}`
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
        { id: "2", x: 300, y: 200, content: { text: "Shape 2" } }
    ],
    connections: [
        {
          from: "1",
          to: "2",
          dataItem: { label: "Connection from 1 to 2" }
        }
    ]
});
</script>

tooltip.delay

Number

The delay in milliseconds before the tooltipShow event is triggered after the user hovers over a diagram item.

Default: 200

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    tooltip: {
        delay: 1000
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Tooltip appears after 1 second" } }
    ]
});
</script>

tooltip.shapeTemplate

Function

Defines the tooltip that will be shown when hovering over a connection.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    tooltip: {
        shapeTemplate: (e)=> `T: ${e.content.text}`
    },
    shapes: [
        { id: "1", x: 100, y: 100, content: { text: "Tooltip appears" } }
    ]
});
</script>