Templates

Updated on Jul 22, 2026

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 to a TemplateRef. To add a header above the body, bind 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.

Change Theme

Theme

Loading ...

Suggested Links

• Anchor Elements
• API Reference of the Tooltip