4

How add tooltip for disabled dropdown button. I use reactstrap.

Oleg Ovcharenko
  • 507
  • 2
  • 8
  • 18

2 Answers2

2

Disable the pointerEvents on the disabled button, so you're actually hovering on span instead of buttons:

<span id="foo">
    <Button disabled style={{ pointerEvents: 'none' }}>nope!</Button>
</span>
<Tooltip target="foo" ...etc>Button is disabled</Tooltip>
NoobTW
  • 2,466
  • 2
  • 24
  • 42
0

Not sure if drop down buttons behave the same as regular buttons, bur for a regular button, you can wrap the button in a div, and set the tooltip to target the div.

<div id='foo'>
  <Button disabled>nope!</Button>
</div>
<Tooltip target='foo' ...etc>Button is disabled</Tooltip>
Phil
  • 2,238
  • 2
  • 23
  • 34
  • I've noticed this only works if the button doesn't completely fill the `div`. – Phil Oct 04 '18 at 11:10
  • 1
    or, the button's title attribute. see https://stackoverflow.com/questions/2238239/tooltips-for-button – Phil Oct 05 '18 at 09:43