Anchor Elements

You can specify which elements (anchors) will render a tooltip.

To define which elements inside the kendoTooltip container will display a tooltip, set the filter property to а CSS selector string that matches these elements. For example, if you set filter="button.primary", the tooltip will appear on button elements with a class="primary" setting. If you set filter="div[data-url]", the tooltip will appear on div elements with a data-url attribute. By default, the filter property is set to the [title] selector which matches all elements with a title attribute.

To specify multiple types of elements as anchors, separate them with a comma—for example, filter="a[href],button[title]". The default tooltip template will render only the content from the title attribute of the anchor. You can change this behavior by applying the content templates.

  selector: 'my-app',
  template: `
    <div kendoTooltip filter="strong" style="padding-top: 10px;">
            In this demo, the
            <strong title="this is the tooltip">Kendo UI Tooltip</strong>
            will show only when you hover
            <strong title="because the 'filter' property is set">
                <code>&lt;strong&gt;</code> elements

            Other elements, like
            <a href="#" title="Default browser tooltip">this link</a>,
            will only show the default browser tooltip,
            even though they have a specified <code>title</code> attribute.
class AppComponent {}

You can render a header title for the Tooltip content by binding the titleTemplate property to a TemplateRef object.

  selector: 'my-app',
  template: `
    <div kendoTooltip

        <ng-template #titleTemplate let-anchor>
            {{ anchor.nativeElement.getAttribute("data-name") }}
        <ng-template #template let-anchor>
            {{ anchor.nativeElement.getAttribute("data-description") }}

        <h2>List of dances</h2>
        <ul *ngFor="let dance of dances">
            <li class="dance"
                {{ dance.danceName }}
  styles: [`
      ul {
          list-style-type: none;
          padding-left: 0;

      li {
          padding: 5px;
          border: 1px solid #ff6757;
          color: #ff6757;
          width: 100px;
          text-align: center;
          border-radius: 5px;
class AppComponent {
    public dances = [
            danceName: "Tango",
            description: "Tango is a partner dance which originated in the 1880s along the River Plate, the natural border between Argentina and Uruguay." },
            danceName: "Flamenco",
            description: "Flamenco is a Spanish art form made up of three parts: guitar playing ('guitarra'), song ('cante'), and dance ('baile')."
            danceName: "Pasodoble",
            description: "Pasodoble (Spanish: double step) is Spanish a dance that emulates the movements of a bullfight."

In this article