Diagram Tooltips
The Kendo UI for Angular Diagram lets you display tooltips when hovering over shapes and connections. Tooltips provide additional information about diagram elements and enhance the user experience.
Basic Configuration
The tooltip content is specified using the tooltipText property on shapes and connections. This property holds the text that displays when the user hovers over the element.
To control when tooltips appear, use the tooltip.visible property. You can enable tooltips globally for all elements or individually for specific shapes and connections.
public shapes: ShapeOptions[] = [
{
id: '1',
content: { text: 'CEO' },
tooltipText: 'Chief Executive Officer',
tooltip: { visible: true }
}
];
public connections: ConnectionOptions[] = [
{
from: '1',
to: '2',
tooltipText: 'Reports to CEO',
tooltip: { visible: true }
}
];The following example demonstrates basic tooltip configuration with simple text tooltips for shapes and connections.
Controlling Tooltip Visibility
Tooltips can be enabled globally for all shapes and connections, or individually per item.
Global Enablement
To enable tooltips for all shapes in the Diagram, set the tooltip.visible property to true in the shapeDefaults configuration. Similarly, enable tooltips for all connections using the connectionDefaults configuration.
public shapeDefaults: ShapeDefaults = {
tooltip: {
visible: true
}
};
public connectionDefaults: ConnectionDefaults = {
tooltip: {
visible: true
}
};The following example demonstrates global tooltip enablement for all shapes and connections using shapeDefaults and connectionDefaults.
When tooltips are enabled globally, the Diagram displays tooltips for items that have a tooltipText property defined.
Per-Item Enablement
You can also enable or disable tooltips for individual shapes or connections by setting the tooltip.visible property on the item. This overrides the global default configuration.
public shapes: ShapeOptions[] = [
{
id: '1',
content: { text: 'Manager' },
tooltip: { visible: true },
tooltipText: 'Department Manager - Oversees daily operations'
},
{
id: '2',
content: { text: 'Developer' },
tooltip: { visible: false }, // Tooltip disabled for this shape
tooltipText: 'This tooltip will not be displayed'
}
];The following example demonstrates per-element tooltip enablement where some shapes and connections have tooltips disabled while others remain enabled.
Customizing Tooltips
The Diagram provides several options for customizing tooltip appearance and content, from simple styling with CSS classes to advanced customization using Angular templates.
The following example demonstrates how to use both shape and connection tooltip templates together to create a comprehensive tooltip experience.
Custom Styling
You can apply custom styles to tooltips using the cssClass option. This allows you to define specific CSS classes that style the tooltip's appearance.
public shapes: ShapeOptions[] = [
{
id: '1',
content: { text: 'Designer' },
tooltipText: 'Creative Designer - Crafts visual concepts',
tooltip: {
visible: true,
cssClass: 'role-tooltip'
}
}
];The following example demonstrates how to style tooltips using the cssClass option.
Shape Tooltip Template
Use the kendoDiagramShapeTooltipTemplate directive to define a custom template for shape tooltips. The template context provides direct access to the shape's dataItem.
<kendo-diagram [shapes]="shapes">
<ng-template kendoDiagramShapeTooltipTemplate let-shape>
<h4>{{ shape.dataItem.name }}</h4>
<p>{{ shape.dataItem.description }}</p>
</ng-template>
</kendo-diagram>The template context provides access to:
- The shape's
dataItem—The data associated with the shape. - You can access any properties defined in your shape's data model.
The following example demonstrates a custom shape tooltip template with employee information.
Connection Tooltip Template
Use the kendoDiagramConnectionTooltipTemplate directive to define a custom template for connection tooltips. The template context provides direct access to the connection's dataItem.
<kendo-diagram [connections]="connections">
<ng-template kendoDiagramConnectionTooltipTemplate let-connection>
<strong>From:</strong> {{ connection.dataItem.from }}<br>
<strong>To:</strong> {{ connection.dataItem.to }}
</ng-template>
</kendo-diagram>The template context provides access to:
- The connection's
dataItem—The data associated with the connection. - You can access any properties defined in your connection's data model.
The following example demonstrates a custom connection tooltip template with financial transfer information.