Adding a Tooltip to a Disabled Button in React

Updated over 6 months ago

Environment

Product Version	9.0.0
Product	Progress® KendoReact Tooltip

Description

I want to add a tooltip to a disabled button in my React application. The button is part of the UI and should display additional information when hovered over, even though it is disabled. How can I achieve this functionality using the KendoReact Tooltip component?

This KB article also answers the following questions:

• How to display tooltips for disabled elements?
• How to use the KendoReact Tooltip with disabled buttons?
• How can I show additional information on hover over a disabled UI element?

Solution

To add a tooltip to a disabled button in a React application using the KendoReact Tooltip, follow these steps:

1. Wrap the KendoReact Button in a <span> HTML element.
2. Set the title attribute of the <span> that wraps the button.
3. Set the display CSS property of the <span> to inline-block.
4. Wrap the <span> and the disabled button both with the KendoReact Tooltip and set the anchorElement prop to "target".

Change Theme

Theme

Loading ...

See Also

• KendoReact Tooltip Documentation
• KendoReact Button Documentation
• Online Demo: Tooltip for Disabled Elements