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.

The following example demonstrates tooltips for both shapes and connections. Hover over the shapes and connection lines to see the tooltips in action.

Change Theme

Theme

Loading ...

Enabling Tooltips

To enable tooltips in the Diagram, set the tooltip input to true. This activates the tooltip functionality for all shapes and connections that have tooltip configuration.

typescript

<kendo-diagram
    [shapes]="shapes"
    [connections]="connections"
    [tooltip]="true">
</kendo-diagram>

Configuring Tooltips

Set the tooltip property on individual shapes or connections to control their tooltip behavior. The tooltip configuration includes:

• visible—Controls whether the tooltip displays for the element.
• text—The content displayed in the tooltip.

typescript

public shapes: ShapeOptions[] = [
    {
        id: '1',
        content: { text: 'Manager' },
        x: 100,
        y: 50,
        tooltip: {
            visible: true,
            text: 'Department Manager - Oversees daily operations'
        }
    }
];

typescript

public connections: ConnectionOptions[] = [
    {
        from: '1',
        to: '2',
        tooltip: {
            visible: true,
            text: 'Reports to Manager'
        }
    }
];

See Also

• Diagram API Reference
• Shapes
• Connections