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

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.
Example
View Source
Edit In Stackblitz  
Change Theme:

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.
Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?