ASP.NET Core Diagram Tooltips

The Telerik UI for ASP.NET Core Diagram component provides built-in tooltip functionality that displays contextual information when hovering over shapes and connections.

This demo showcases how to implement custom tooltips for both diagram shapes and connections. The tooltips display detailed employee information for shapes and relationship details for connections in an organizational hierarchy.

The Diagram supports the following tooltip configurations:

• Shape Tooltips—Use the ShapeTemplateHandler method to define a JavaScript function that returns custom HTML content for shape tooltips. In this example, shape tooltips display employee details including name, title, department, contact information, and tenure.
• Connection Tooltips—Use the ConnectionTemplateHandler method to define a JavaScript function that returns custom HTML content for connection tooltips. In this example, connection tooltips show the reporting relationship between employees.

The tooltip templates can access shape and connection data through the template context, allowing you to create rich, data-driven tooltip experiences that enhance the usability of your diagrams.

This Diagram example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.