# Templates

You can customize both the body and the header of the Tooltip with Angular templates.

By default, the Tooltip shows the `title` attribute value of the anchor element. To replace this content, bind [`tooltipTemplate`](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/tooltipdirective#tooltiptemplate) to a `TemplateRef`. To add a header above the body, bind [`titleTemplate`](https://www.telerik.com/kendo-angular-ui/components/tooltips/api/tooltipdirective#titletemplate) to a separate `TemplateRef`. Both templates expose the anchor element through `let-anchor`, so you can read its attributes or dataset to render contextual content.

```html
<div kendoTooltip
     [tooltipTemplate]="bodyTemplate"
     [titleTemplate]="headerTemplate">
    <span #anchor data-name="API" data-status="Degraded">API</span>
</div>

<ng-template #headerTemplate let-anchor>
    <strong>{{ anchor.nativeElement.dataset.name }}</strong>
</ng-template>

<ng-template #bodyTemplate let-anchor>
    Status: {{ anchor.nativeElement.dataset.status }}
</ng-template>
```

The following example shows a service health dashboard where each row displays the service name as a tooltip header and its status details as the body.

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

## Suggested Links

* [Anchor Elements](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/anchor-elements)
* [API Reference of the Tooltip](https://www.telerik.com/kendo-angular-ui/components/tooltips/api)