All Components

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.

@Component({
  selector: 'my-app',
  template: `
    <div kendoTooltip filter="strong" style="padding-top: 10px;">
        <p>
            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
            </strong>.
        </p>

        <p>
            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.
        </p>
    </div>
  `
})
class AppComponent {}

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

@Component({
  selector: 'my-app',
  template: `
    <div kendoTooltip
        filter=".dance"
        [titleTemplate]="titleTemplate"
        [tooltipTemplate]="template"
        position="right"
        tooltipWidth="400">

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

        <h2>List of dances</h2>
        <ul *ngFor="let dance of dances">
            <li class="dance"
                [attr.data-name]="dance.danceName"
                [attr.data-description]="dance.description">
                {{ dance.danceName }}
            </li>
        </ul>
    </div>
  `,
  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