Tooltip following cursor position on hover

[Rednegniw]

Hi, first, amazing library! So thank you very much for developing it.

Just had an idea - it would be cool if there was a component such as a tooltip that would follow the mouse/cursor position while hovering over an element. It might interesting, for example, when you want to tell the user why they can't click on a disabled element and so on.

Something like this - https://codepen.io/paulvddool/pen/mROEGa (not mine, found randomly on google)

[Rednegniw]

Just bumping this to get an answer. Is there a possibility of adding a follow-cursor on hover tooltip? Thanks

[jjenzz]

I've converted this to an issue as a feature request #1323

[Rednegniw]

Thank you 🙂

[giovanniincammicia]

Hi everyone, while we wait for a primitive, I've implemented it with the Tooltip component. Hope this helps.
The idea is to use as a Trigger a 0x0 div that just follows the cursor position and then play with onMouseEnter and onMouseLeave properties on the hoverable div.
https://codesandbox.io/s/inspiring-tdd-2m0vkj
@Rednegniw @jjenzz

[giovanniincammicia]

That's true :( it's definitely a workaround waiting for the official solution

[Rednegniw]

Hi! This seems to no longer work after updating to Tooltip 1.0.0. Do you know what should be changed to achieve similar results? I can't seem to figure it out :/ @giovanniincammicia

[giovanniincammicia]

Hi @Rednegniw , sorry for the late reply, I haven't been able to upgrade yet, I'll try as soon as possible

[Rednegniw]

Thank you @giovanniincammicia ! Looking forward to it.

[ZakRabe]

With 1.0 you can add a key to Tooltip.Content based on the mouse position. and it should redraw the content following the mouse

[franklinjavier]

I created a workaround using a custom hook to retrieve the mouse coordinates and assign them to the offsets props.

https://codesandbox.io/s/goofy-star-29mzkc?file=/src/App.tsx