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

Displaying a Tooltip on Disabled Elements


ProductProgress® Kendo UI for Angular Tooltip


How can I display a Kendo UI for Angular Tooltip when the user hovers over a disabled element?


The Tooltip relies on the mouseenter event of the hovered element. However, disabled elements do not fire any events.


To show a tooltip on a disabled element, set the pointer-events CSS property to auto.

For example, to display a Tooltip on disabled button, use the .k-button CSS class and :disabled pseudo-class to target all disabled buttons and set the pointer-events property to auto.

.k-button:disabled {
    pointer-events: auto;

You can apply the same solution to other disabled elements.

The following example demonstrates the suggested approach.

View Source
Change Theme:

In this article

Not finding the help you need?