All Components

Opening Programmatically

The Tooltip provides options for consuming its API programmatically.

To show a Tooltip by invoking its API, either invoke it from templates or from the methods of the component.

In Templates

  1. Get the kendoTooltip instance from the TooltipContainer element.
  2. Set the showOn property to none to disable the default behaviour that shows and hides the ToolTip on hover.
  3. Use the Tooltip API to control the Tooltip. For example, call tooltip.toggle(element) to toggle the Tooltip above the anchor element.
@Component({
  selector: 'my-app',
  template: `
    <div kendoTooltip #tooltip="kendoTooltip" [tooltipTemplate]="template" showOn="none" position="left" filter='a' style="padding-top: 10px;">
        <div>
            Click the button to show the tooltip with
            <a #first href="http://example.com/first">first link</a>
            as an anchor.
            <button class="k-button" (click)="tooltip.show(first)">Show tooltip</button>
        </div>
         <div>
            Click the button to toggle the tooltip with
            <a #second href="http://example.com/second">second link</a>
            as an anchor.
            <button class="k-button" (click)="tooltip.toggle(second)">Toggle tooltip</button>
        </div>
        <div>
            Hide tooltip
            <button class="k-button" (click)="tooltip.hide()">Hide tooltip</button>
        </div>
    </div>

    <ng-template #template let-anchor>
        <span>{{ anchor.nativeElement.getAttribute("href") }}</span>
    </ng-template>
  `
})
class AppComponent {}

In Component Methods

  1. Add the import { TooltipDirective } from '@progress/kendo-angular-tooltip'; statement to your AppComponent.
  2. To disable the default rendering on hover, add the kendoTooltip directive to the template and set the showOn property to none.
  3. In the component code, get the TooltipDirective instance through a @ViewChild property.
  4. Use the Tooltip API to show, hide, or toggle the Tooltip.
import { Component, ViewChild } from '@angular/core';

// 1. Import the directive to allow querying
import { TooltipDirective } from '@progress/kendo-angular-tooltip';

@Component({
  selector: 'my-app',
  template: `
    <!-- 2. Add the directive -->
    <div kendoTooltip showOn="none">
        <p>
            Kendo UI widgets follow the
            <abbr
                #anchor
                title="Web content accessibility guidelines">
                WCAG
            </abbr>
            whenever possible, and provide developer control over accessibility features.
        </p>

        <button class="k-button" (click)="showTooltip(anchor)">
            Show tooltip
        </button>
    </div>
  `
})
export class AppComponent {
    // 3. Get the directive instance
    @ViewChild(TooltipDirective)
    public tooltipDir: TooltipDirective;

    public showTooltip(eventTarget: any): void {
        // 4. Use the public API
        this.tooltipDir.toggle(eventTarget);
    }
}
In this article