Showing Kendo UI for Angular Tooltip on Focus

Environment

Product

Progress® Kendo UI® for Angular Tooltip

Description

I want to make the Kendo UI for Angular Tooltip keyboard accessible by displaying it when an element gains focus. How can I achieve this functionality for the Tooltip component?

This Knowledge Base article also answers the following questions:

• How to show the Kendo UI for Angular Tooltip on focus?
• How to make the Tooltip keyboard accessible in Kendo UI for Angular?
• How to use the focus and blur events of an HTML element in combination with the Kendo UI for Angular Tooltip?

Solution

To display the Kendo UI for Angular Tooltip when focusing a certain element, use Angular's event bindings along with the show and hide methods that the TooltipDirective provides.

You can find below more detailed steps for achieving the desired behavior:

1. Use the focus event of the HTML element, on which the TooltipDirective is applied, to show the Tooltip when the element gains focus.
2. Use the blur event of the HTML element to hide the Tooltip when the element loses focus.
3. Set the showOn property of the TooltipDirective to "none" in order to disable the built-in display of the Tooltip on hover and allow programmatic control of the Tooltip's visibility.

html

<ng-template #template let-anchor>My Tooltip on focus</ng-template>

<div
  kendoTooltip
  #tooltip="kendoTooltip"
  [tooltipTemplate]="template"
  (focus)="showTooltip(myElement)"
  (blur)="hideTooltip()"
  showOn="none"
  tabindex="0"
>
  <h3 #myElement>Focus me to see the tooltip</h3>
</div>

ts

@ViewChild(TooltipDirective) tooltipDir: TooltipDirective;

public showTooltip(element: HTMLElement): void {
  this.tooltipDir.show(element);
}

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

The following example demonstrates the suggested approach in action.

Change Theme

Theme

Loading ...

See Also

• Kendo UI for Angular Tooltip Programmatic Control
• Kendo UI for Angular Tooltip Overview
• API Reference of the TooltipDirective