Tooltips
The Diagram supports tooltips that display additional information when users hover over shapes and connections.
Tooltips enhance the user experience by providing contextual information without cluttering the diagram with excessive visual elements. You can customize the appearance and behavior of tooltips for both shapes and connections.
Getting Started
To enable tooltips, set the tooltip configuration option to true or provide a configuration object.
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
tooltip: true,
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>When enabled, the Diagram will display default tooltips when hovering over shapes and connections.
Configuring the Delay
The delay option controls the time in milliseconds before the tooltip appears after the user hovers over a diagram item. The default delay is 200 milliseconds.
<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>Increasing the delay can prevent tooltips from appearing during quick mouse movements across the diagram.
Customizing Shape Tooltips
Use the shapeTemplate option to define a custom template function for shape tooltips. The template function receives the shape data as a parameter and returns the tooltip content.
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
tooltip: {
shapeTemplate: function(e) {
return "Shape: " + e.content.text;
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Sales" } },
{ id: "2", x: 300, y: 100, content: { text: "Marketing" } }
]
});
</script>The template function can return HTML content to create rich tooltips with formatting and structure.
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
tooltip: {
shapeTemplate: function(e) {
return "<div><strong>" + e.content.text + "</strong><br/>" +
"ID: " + e.id + "</div>";
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Department A" } }
]
});
</script>Customizing Connection Tooltips
Use the connectionTemplate option to define a custom template function for connection tooltips. This is particularly useful when connections have associated data.
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
tooltip: {
connectionTemplate: function(e) {
return "Connection: " + 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>Connection tooltips can display relationship information, flow details, or any metadata associated with the connection.
Using Both the ShapeTemplate and ConnectionTemplate Templates
You can configure both shape and connection templates simultaneously to provide comprehensive tooltip information throughout the diagram.
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
tooltip: {
delay: 500,
shapeTemplate: function(e) {
return "<strong>" + e.content.text + "</strong>";
},
connectionTemplate: function(e) {
return "Link from " + e.from + " to " + e.to;
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Start" } },
{ id: "2", x: 300, y: 200, content: { text: "End" } }
],
connections: [
{ from: "1", to: "2" }
]
});
</script>Arrow Function Syntax
You can use ES6 arrow function syntax for cleaner template definitions.
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
tooltip: {
shapeTemplate: (e) => `<div class="custom-tooltip">${e.content.text}</div>`,
connectionTemplate: (e) => `Link: ${e.dataItem.label}`
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Node" } }
]
});
</script>Disabling Tooltips
To disable tooltips, set the tooltip option to false.
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
tooltip: false,
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "No tooltip" } }
]
});
</script>