search

everweij / react-laag

Hooks to build things like tooltips, dropdown menu's and popovers in React
https://www.react-laag.com
MIT License
906 stars 44 forks source link

Docs: useTooltip() disabled button 'gotcha' #36

Closed TheTedAdams closed 2 years ago

TheTedAdams commented 4 years ago

Just ran into a fairly nasty bug using useTooltip that I actually tracked down to a react problem, but thought it would be good to include in the docs.

In short: Disabled buttons in react fire mouseenter events (will open the tooltip) but they do NOT fire mouseleave events (the tooltip never goes away!) This can be fixed by applying pointer-events: none; to the disabled button.

Here's a codesandbox illustrating the issue (and solution)

The relevant react issue: https://github.com/facebook/react/issues/4251

An example of react-bootstrap documenting this in their tooltip documentation: https://react-bootstrap.github.io/components/overlays/#overlays-disabled

Just thought it would be good to call this out so nobody else has to get very confused when their tooltips become permanent...

ryanbuckleyca commented 3 years ago

I had noticed this bug as well and was able to narrow it down to the disabled button, but wasn't sure how to resolve it. thank you!