mohsinulhaq/react-popper-tooltip

Close tooltip-content when mouse over it

robba86 opened this issue · 7 comments

robba86 commented

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I like to make the tooltip-content disappear when the target for the tooltip is not hovered any more. If you hover the actual tooltip-content it should close.

Describe the solution you'd like
A clear and concise description of what you want to happen.

An prop closeOnToolTipHover={true} // defaults to false

Or maybe, i did not find it, there already an option for this? :P

mohsinulhaq commented

You could use the component in controlled mode and hide onMouseLeave of the trigger.
Check this example out:
https://codesandbox.io/s/hide-on-trigger-onmouseleave-q4vwc?file=/src/App.tsx

  • ❤️1
robba86 commented

Awesome, thank you. I would figure it ut eventually but thought it was easier to reach out. Ill check out the example

  • 👍1
robba86 commented

Humz.. you solution did not seem to work that good, it kind of works as expected but when i have hovered an button and hover its tooltip, and i want to hover the button again it will not show (i think the position is where the tooltip is placed in that area when you hover your mouse over the button). Try adding more items and make some hover tests and you will see what i mean.

I tried solving this my self ofc but after a time i gave up for the day

mohsinulhaq commented

Got it. So the issue happens when you enter from the side from where the tooltip is supposed to appear. The issue is with the lib's arrow CSS. Its bounds extend a couple of pixels beyond the visible bounds because of the way it's made. Due to that when it appears over the trigger, it triggers a mouseleave and immediately triggers a hide.
You have two options:

  • If you have your own tooltip CSS in your app, you might not face this issue if your arrow CSS is proper.
  • If not, you can add the style { pointerEvents: 'none'} to the tooltip. So that it doesn't interfere with the mouseenter and mouseleave of the trigger.

I have changed the codesandbox with the second solution. Do check it out and let me know.

  • ❤️1
robba86 commented

Alright it works! Sweet.. now, how do i give you a beer?

  • 😄1
mohsinulhaq commented

Haha, glad to hear it worked! Just a star to the library is enough for me 😃

robba86 commented

Haha, glad to hear it worked! Just a star to the library is enough for me

Thank you, a star it is then =)

  • 👍1