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.

[benlieb]

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>

[kuba11]

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>

That worked great, thanks! I also replaced 'span' with 'div', since span caused the tooltip to be visible only when hovering over the text, not the whole button.

[evgenyfadeev]

^ you have to style the span though to be full height of the button, otherwise the tip will trigger only over the text.

[eliranmal]

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]

also, here's my current take for a workaround (source):

export default const FormControl = ({
  tag: FormControlType,
  ...props
}) => {
  const tooltipAttributes = Object.entries(props)
    .filter(([key, value]) => key.startsWith('data-'))
    .reduce((accum, [key, value]) => {
      accum[key] = value
      return accum
    }, {})

  return props.disabled && tooltipAttributes['data-tip'] ? (
    <span {...tooltipAttributes}>
      <FormControlType {...props} />
    </span>
  ) : (
    <FormControlType {...props} {...tooltipAttributes} />
  )
}

this implementation has an obvious limitation (on top of the structural limitations mentioned in earlier comments); it assumes all data-* attributes belong to react-tooltip, but other then that, it's just a convenient way to encapsulate all that wrapper shenanigans into a nice package.

example usage:

const Button = ({className = '', ...props}) => (
  <FormControl
    {...props}
    tag="button"
    className={`drifter-button ${className}`}
  />
)

it can also be used for its declarative abstraction-level of form-control components, that is - we can include CSS rules that are common to buttons, inputs, selects etc. (ever found yourself constantly repeating stuff like outline: none across form control components? i know i did..).

[sztadii]

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>

Works great, thanks :)