atomiks / tippyjs

Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
MIT License
11.92k stars 520 forks source link

Place tooltip at x-position where user clicked and y-position above the element #973

Open hski-github opened 3 years ago

hski-github commented 3 years ago

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.

atomiks commented 2 years ago

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

vincerubinetti commented 1 year ago

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", orfollowCursorInitial: true` (separating it out).