tippyjs

tippyjs copied to clipboard

Problem

I have a wide element (x-axis in a diagram) where I would like to show tooltip above the element (like Tippy default), but at the position where the user clicked the element. With Tippy I can positions the tooltip and arrow at the middle, or towards the start or end. Using followCursor=initial the tooltip is positioned where the user clicked, but then it is not positioned above the element.

Solution

I would need a new option as a kind of mixture of followCursor=horizontal and initial. It would show the tooltip like with followCursor=horizontal for the initial positioning of the tooltip, but then not move it further when the users moves the mouse.

This is something I was investigating after looking at Wikipedia's hovercard when you hover over links, then I got busy with implementing inlinePositioning which is sort of a different technique of the same thing. initialHorizontal + initialVertical might be possible to implement for followCursor though

It's a pretty niche use-case, but I kinda want this too.

I have a world map projection, with countries grouped into big regions (like continents). Necessarily, sometime the regions will cut across the boundaries of the map and wrap to the other side, making the bbox for a tooltip as wide as the whole map. As such, my solution is to only set followCursor when the region crosses the edge. And, I don't want the tooltip to cover any parts of the region shape, so I use "horizontal". This works nicely, except that it looks weird fo some region tooltips to follow the cursor smoothly, and others just stay put.

So yeah, it would be nice to have something like followCursor: "initial-horizontal", or followCursorInitial: true` (separating it out).