Tooltip showOn: focus in Kendo for Angular?

[Max]

Hello,

I'm looking into making a kendoTooltip object keyboard accessible in Kendo for Angular:

                <div kendoTooltip showOn="[...]" position="bottom" tabindex="0">

I see in the documentation for jQuery here that the tooltip has a showOn property which can take values of type "mouseenter", "click", or "focus". I'd like to have the equivalent of "mouseenter focus" as the value. However, the supported values seem different in Angular: my options instead seem to be "click", "hover", or "none". Is there a way to give this object a 'focus'-type value in Angular?

[Martin Bechev]

Hi Max,

The Kendo UI for Angular Tooltip does not natively support the "focus" option for the showOn property, unlike the jQuery version. However, you can achieve similar functionality by using Angular's event bindings to show the tooltip on focus. Here’s how you can implement this workaround:

You can use the focus and blur events to control the visibility of the tooltip. To dynamically show or hide the tooltip, use the toggle or show method and hide method.

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

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

  @ViewChild(TooltipDirective) tooltipDir: TooltipDirective;
  public showTooltip(e): void {
    this.tooltipDir.toggle(e);
  }
  public hideTooltip(e): void {
    this.tooltipDir.hide();
  }

Explanation

• The focus event is used to show the tooltip when the element gains focus. This allows for keyboard accessibility, as users can navigate to the element using the keyboard.
• The blur event is used to hide the tooltip when the element loses focus, ensuring that the tooltip is not left open.
• showOn="none": This setting prevents the tooltip from automatically showing on hover or click, allowing you to manage its visibility programmatically.

Here is a runnable example:

https://stackblitz.com/edit/angular-uv19befx?file=src%2Fapp%2Fapp.component.ts

Additional Tips

• This approach provides a workaround to achieve the desired behavior, making the tooltip accessible via keyboard focus, similar to the "mouseenter focus" functionality in jQuery.
• If you believe the focus functionality should be part of the library, consider suggesting it as a feature request.

Please check it out and let me know how it goes.

Regards,
Martin Bechev
Progress Telerik

[Max]

Hi Martin,

Yes, this works, thank you. I had to update to ViewChildren to function with multiple tooltips on the same page, but they are now keyboard accessible.