New to Kendo UI for Angular? Start a free 30-day trial

Programmatic Control

Updated on Jul 22, 2026

The Tooltip API allows you to show, hide, or toggle a tooltip in response to custom events—not just hover. This is useful for confirmation feedback, contextual hints on focus, or any scenario where hover behavior is not appropriate.

To take programmatic control, set showOn to none to disable hover, then call show(), hide(), or toggle() on the directive instance.

html

<div kendoTooltip #tooltip="kendoTooltip" showOn="none">
    <span #anchor title="Tooltip content">Anchor element</span>
    <button (click)="tooltip.show(anchor)">Show</button>
    <button (click)="tooltip.hide()">Hide</button>
</div>

In Templates

Export the directive as a template variable (#tooltip="kendoTooltip") and call its methods directly from event bindings. This approach is best for simple, self-contained interactions where the show/hide logic lives entirely in the template—for example, confirming a user action with a brief tooltip that auto-dismisses.

html

<div kendoTooltip #tooltip="kendoTooltip" showOn="none">
    <button #btn title="Copied!" (click)="tooltip.show(btn)">Copy</button>
</div>

The following example shows a "copy to clipboard" confirmation tooltip that appears next to the button and auto-hides after two seconds.

Change Theme

Theme

Loading ...

In Component Methods

Use @ViewChild(TooltipDirective) to access the directive instance from your component class. This approach is better when the show/hide decision depends on component state, asynchronous results, or multiple conditions—for example, displaying field-level hints during form entry or showing validation feedback after a server response.

@ViewChild(TooltipDirective) public tooltipDir: TooltipDirective;

public showHint(anchor: HTMLElement): void {
    this.tooltipDir.show(anchor);
}

public hideHint(): void {
    this.tooltipDir.hide();
}

The following example shows contextual hints that appear when a form field receives focus and disappear on blur.