Displaying a Tooltip on Disabled Elements

Updated on Aug 24, 2026

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;
}
.k-disabled {
    pointer-events: auto;
}

Place the CSS in a global stylesheet, such as styles.scss, or set the component's encapsulation to ViewEncapsulation.None. Angular component-scoped styles do not target the internal elements rendered by Kendo UI for Angular components.

The same approach applies to components that support a disabled state, including the following:

• Button.
• TextBox.
• ToolBar Button.
• TextArea.
• NumericTextBox.
• DatePicker.

The following demo shows tooltips on disabled Button, TextBox, and ToolBar Button components.

Example

View Source

Loading ...