Displaying a Tooltip on Disabled Elements

Environment

Product

Progress® Kendo UI for Angular Tooltip

Description

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

Cause

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

Solution

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.

css

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

You can apply the same solution to other disabled elements.

The following example demonstrates the suggested approach.

Change Theme

Theme

Loading ...