# 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 to `true` or provide a configuration object.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Tooltip(true)
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
        })
    )
```

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.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Tooltip(tooltip => tooltip
            .Delay(1000)
        )
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100)
                .Content(c => c.Text("Tooltip appears after 1 second"));
        })
    )
```

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.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Tooltip(tooltip => tooltip
            .ShapeTemplate("function(e) { return 'Shape: ' + e.content.text; }")
        )
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Sales"));
            shapes.Add().Id("2").X(300).Y(100).Content(c => c.Text("Marketing"));
        })
    )
```

The template function can return HTML content to create rich tooltips with formatting and structure.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Tooltip(tooltip => tooltip
            .ShapeTemplate("function(e) { return '<div><strong>' + e.content.text + '</strong><br/>ID: ' + e.id + '</div>'; }")
        )
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Department A"));
        })
    )
```

## 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.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Tooltip(tooltip => tooltip
            .ConnectionTemplate("function(e) { return 'Connection: ' + e.dataItem.label; }")
        )
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Shape 1"));
            shapes.Add().Id("2").X(300).Y(200).Content(c => c.Text("Shape 2"));
        })
        .Connections(connections =>
        {
            connections.Add().From("1").To("2");
        })
    )
```

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.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Tooltip(tooltip => tooltip
            .Delay(500)
            .ShapeTemplate("function(e) { return '<strong>' + e.content.text + '</strong>'; }")
            .ConnectionTemplate("function(e) { return 'Link from ' + e.from + ' to ' + e.to; }")
        )
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Start"));
            shapes.Add().Id("2").X(300).Y(200).Content(c => c.Text("End"));
        })
        .Connections(connections =>
        {
            connections.Add().From("1").To("2");
        })
    )
```

## Arrow Function Syntax

You can use ES6 arrow function syntax for cleaner template definitions.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Tooltip(tooltip => tooltip
            .ShapeTemplate("(e) => `<div class='custom-tooltip'>${e.content.text}</div>`")
            .ConnectionTemplate("(e) => `Link: ${e.dataItem.label}`")
        )
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("Node"));
        })
    )
```

## Disabling Tooltips

To disable tooltips, set the `Tooltip` option to `false`.

```Razor HtmlHelper
    @(Html.Kendo().Diagram()
        .Name("diagram")
        .Tooltip(false)
        .Shapes(shapes =>
        {
            shapes.Add().Id("1").X(100).Y(100).Content(c => c.Text("No tooltip"));
        })
    )
```

## See Also

* [Basic Usage of the Diagram for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/diagram)
* [Server-Side API Reference of the Diagram for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/api/diagram)
* [Diagram Shapes for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/diagrams-and-maps/diagram/shapes)
* [Diagram Editing for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/diagrams-and-maps/diagram/editing)