# Diagram Tooltips

The [Kendo UI for Angular Diagram](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams) lets you display tooltips when hovering over [shapes](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/shapes) and [connections](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/connections). Tooltips provide additional information about diagram elements and enhance the user experience.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/tooltips/overview/source.txt)

## Basic Configuration

The tooltip content is specified using the [`tooltipText`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shapeoptions#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](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/tooltips#global-enablement) for all elements or [individually](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/tooltips#per-item-enablement) for specific shapes and connections.

```typescript
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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/tooltips/basic-configuration/source.txt)

## 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`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shapedefaults) configuration. Similarly, enable tooltips for all connections using the [`connectionDefaults`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/connectiondefaults) configuration.

```typescript
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`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/tooltips/global-enablement/source.txt)

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`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shapeoptions) or [`connections`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/connectionoptions) by setting the `tooltip.visible` property on the item. This overrides the global default configuration.

```typescript
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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/tooltips/per-element-enablement/source.txt)

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/tooltips/template-overview/source.txt)

### Styling Tooltips

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.

```typescript
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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/tooltips/styling-tooltips/source.txt)

### Shape Tooltip Template

Use the [`kendoDiagramShapeTooltipTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shapetooltiptemplatedirective) directive to define a custom template for shape tooltips. The template context provides direct access to the shape's `dataItem`.

```html
<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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/tooltips/shape-template/source.txt)

### Connection Tooltip Template

Use the [`kendoDiagramConnectionTooltipTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/connectiontooltiptemplatedirective) directive to define a custom template for connection tooltips. The template context provides direct access to the connection's `dataItem`.

```html
<kendo-diagram [connections]="connections">
    <ng-template kendoDiagramConnectionTooltipTemplate let-connection>
        <strong>From:</strong> {{ connection.from }}<br>
        <strong>To:</strong> {{ connection.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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/tooltips/connection-template/source.txt)

## See Also

* [Diagram API Reference](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/diagramcomponent)
* [Diagram Data Binding](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/data-binding)
* [Diagram Exporting](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/pdf-export)
* [Diagram Layouts](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/layouts)