Place tooltip bottom-start from pointer not element?

[viveleroi]

Is there a way to place the tooltip bottom-start from the mouse pointer location? It looks like the tooltip attaches to the element and doesn't move, but our design requirements expect the tooltip to float below and to the right of the pointer.

I thought the imperative ref "api" might work but I don't see a way to set custom position logic "on open".

[gabrieljablonski]

I don't believe placing something relative to the bottom of the pointer is a straight-forward design for browsers. Default cursor sizes may vary between different operating systems (though 32x32 seems like the norm), and the user may have a custom cursor as well, so the experience might be different across users. Also keeping track of the page zoom to adjust the offset is definitely doable, but a bit annoying.

With that out of the way, assuming you still want to try keeping this design, while the tooltip does offer the float prop, which makes the tooltip follow the pointer, and you can you combine it with the offset prop to achieve that effect (though I use the middlewares prop instead in the example, explanation below).

Here's the example:

https://codesandbox.io/p/sandbox/react-tooltip-overflow-forked-ptgn7n?file=%2Fsrc%2FApp.js%3A34%2C17

It will look broken on this page, since the application runs inside an iframe, but it should look correct if you open the "standalone" demo application here:

https://ptgn7n.csb.app/

On a further note, the tooltip by default flips from bottom to top (or top to bottom) when it would overflow the viewport. Here's how it looks:

tooltip.mp4

So that doesn't happen, we overwrite the default middlewares and omit flip().

---

At the end of the day, from a design/UX perspective I'd still recommend either keeping the tooltip with the default float positioning (above pointer), or have a regular tooltip anchored to the input.

[gabrieljablonski]

At this point you might wanna look into some other tooltip solutions. There are some CSS-only alternatives that might work for your use-case out of the box.

It is definitely possible to tweak react-tooltip to work exactly as you want, but it might not be worth the trouble.

[viveleroi]

I'm close enough I will probably try to continue. CSS-only probably won't work well enough given the complexity of our requirements and so far I haven't found a library that clearly handles this use case while also supporting enough for our other requirements.

If you have any ideas on why middleware approaches inside of an iframe break, please let me know so I can get a jump start. Not sure what to do about a delay in showing either but that seems easier to fix.

[viveleroi]

Well my approach breaks storybook because it seems like they're using transform/scale on elements which reset a position: fixed element's container from the viewport. Not sure I can fix that but that's less of a concern, as it works fine outside of the auto-generated docs.

[viveleroi]

Is it possible to render the tooltip in a portal? We already have portals we could use for this and that would very likely solve our positioning problem

[viveleroi]

I think positioning the tooltip via the mouse is not great UX especially when we're dealing with form fields, it'll cover the element and might block the user. I'm going to go back to our requirements people and push back on that.