react-tooltip: Disabled element won't show tooltip

 <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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 29
Comments: 16

Most upvoted comments

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.

+45

strongui on Sep 5, 2018

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>

+27

bost-h on Jun 7, 2017

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.

+20

YuriScarbaci on Oct 11, 2019

The workaround that worked best for me is to put the span inside the button:

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

+11

benlieb on Jul 8, 2021

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

mdelrossi1 on Apr 23, 2018

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

WickyNilliams on Aug 24, 2017

i’ve been bitten, too, and was hoping for a true solution, but…

looks like this is gonna be hard to solve without introducing some higher-level code (which i’m not sure is desired for this library); the issue stems from the native behavior of disabled elements (see this demo for an illustration of this behavior).

details:

the way that react-tooltip responds to user interaction is relying on native dom event binding (namely, mouseenter and focus) for attaching the show/hide listeners, as seen in the source code, on the main file. these events are not triggered by the user agent, if the element is marked as disabled. W3C’s recommendation on this states that engines should prevent dispatching click events, but apparently vendor implementations have broadened this definition (or probably there’s already a spec i’m not aware of).

eliranmal on Dec 8, 2021