# Tooltip

The Sankey diagram has built-in tooltips that are displayed for the nodes and links when hovering them. This does not require any configurations and is handled by the browser.

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

## Customize Tooltip Behaviour

You can customize the tooltip behavior using the [`tooltip`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/sankeycomponent#tooltip) property. The following options are available:

* `offset`—Set the distance between the pointer and the tooltip.
* `visible`—Set whether the tooltip is displayed or not.
* `followPointer`—Set whether the tooltip follows the pointer or not.
* `delay`—Set the delay until the tooltip is displayed after hovering.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/sankey/tooltip-customization/source.txt)

## Specifying a Node Tooltip Template

To specify a template, add an `ng-template` tag as a child of the [`kendo-sankey-tooltip`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/sankeytooltipcomponent) component. The template is passed to the [`SankeyNodeTooltipTemplateContext`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/sankeynodetooltiptemplatecontext). If you add the template to the `kendo-sankey-tooltip` component, use the [`kendoSankeyNodeTooltipTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/sankeynodetooltiptemplatedirective) directive on the template to indicate that the template is used for the node tooltips.

The following example demonstrates how to customize the node tooltip template content by using a template.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/sankey/tooltip-node-template/source.txt)

## Specifying a Link Tooltip Template

To specify a template, add an `ng-template` tag as a child of the [`kendo-sankey-tooltip`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/sankeytooltipcomponent) component. The template is passed to the [`SankeyLinkTooltipTemplateContext`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/sankeylinktooltiptemplatecontext). If you add the template to the `kendo-sankey-tooltip` component, use the [`kendoSankeyLinkTooltipTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/sankeylinktooltiptemplatedirective) directive on the template to indicate that the template is used for the link tooltips.

The following example demonstrates how to customize the node tooltip template content by using a template.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/sankey/tooltip-link-template/source.txt)

## Suggested Links

* [API Reference of the Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api)
* [API Reference of the Sankey Diagram](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/sankeycomponent)