React-tooltip: Disabled element won't show tooltip

[stefensuhat]

 <button
    onClick={onCheckoutPress}
     className="button primary font-14 font-400 full"
     disabled={true}
     data-tip="Disabled"
     data-for="checkout-button"
 >
     Save
 </button>

 <ReactToolTip
       id="checkout-button"
/>

The tooltip won't show if button is disabled.

[bost-h]

Same issue here, but it only occurs with (disabled) buttons, not all elements.
As a workaround, I wrapped my disabled button inside a span element :

<span data-tip="Lorem ipsum" data-tip-disable={false}>
    <button disabled={true}>Click</button>
</span>

[WickyNilliams]

I was bit by the same issue. Good idea on the workaround

[kellyrmilligan]

+1, guess i'm doing the workaround 🤕

[mdelrossi1]

The workaround makes the tooltip display, but, for me, it does not follow the mouse.

[strongui]

Hm, don't really like the wrapping workaround, as it can mess up things like menu items etc, that rely on a certain DOM structure. I think a very common scenario is to want to show a tool-tip if a button is disabled, to explain to the user why it's disabled.

[NandySahukar]

Keep the button inside the <span> tags then you can get the tooltip for disabled buttons. This is the best you can do instead of using warning

<span> <button disabled> Save </button> </span>

[YuriScarbaci]

Hm, don't really like the wrapping workaround, as it can mess up things like menu items etc, that rely on a certain DOM structure. I think a very common scenario is to want to show a tool-tip if a button is disabled, to explain to the user why it's disabled.

can't stress this more.

[jonauz]

I haven't full tested it yet, but I have a situation where wrapping in ... it makes tooltip appear, but don't disappear.

[rahul-desai3]

+1

[tsrul]

If you have another tag in disabled button you can set tooltip on it as well.