All Components

Templates

You can provide a custom template for the content of the Tooltip.

By default, the Tooltip shows the title attribute value of the anchor element. To customize this content, specify a template for the Tooltip by binding its tooltipTemplate property to a TemplateRef object. To get a template reference, use the #id notation in the template of your component. For more information on referencing templates, refer to the official Angular guide.

@Component({
  selector: 'my-app',
  template: `
    <ng-template #template let-anchor>
        <span>{{ anchor.nativeElement.getAttribute("href") }}</span>
    </ng-template>

    <div kendoTooltip [tooltipTemplate]="template" filter="a[href]" style="padding-top: 10px;">

        <p>
            <strong>Wikipedia</strong> is a multilingual,
            <a href="https://en.wikipedia.org/wiki/Web_application">web-based</a>,
            <a href="https://en.wikipedia.org/wiki/Free_content">free-content</a>
            <a href="https://en.wikipedia.org/wiki/Encyclopedia">encyclopedia</a>
            project supported by the
            <a href="https://en.wikipedia.org/wiki/Wikimedia_Foundation">Wikimedia Foundation</a>
            and based on a model of openly editable content.
            Wikipedia is the largest and most popular general
            <a href="https://en.wikipedia.org/wiki/Reference_work">reference work</a>
            on the Internet, and is named as one of the most popular websites.
        </p>

        <p>
            - From the <a href="https://en.wikipedia.org/wiki/Wikipedia">Wikipedia article</a>
            on <a href="https://en.wikipedia.org/">Wikipedia</a>
        </p>

    </div>
  `
})
class AppComponent {}
In this article