Open K0rhak opened 2 years ago
@atomiks Related to this issue, I've found that using singletons together with followCursor
causes the position of the tooltip to placed improperly.
From the miniature experiments I've run, the issue stems from createSingleton
not setting the instance reference properly, so the tooltip positions are off. As in the tooltips are placed relative to the reference element, but createSingleton
isn't using the proper reference element.
(PS. I'm planning to use tippy.js for bundlejs.com)
@atomiks The solution I've found to this problem is to use the common ancestor of all tippy instances in a singleton, like so,
// https://stackoverflow.com/a/62759635/12140185
function closestCommonAncestor(elements) {
const reducer = (prev, current) => current.parentElement.contains(prev) ? current.parentElement : prev;
return elements.reduce(reducer, elements[0]);
}
const triggerTargets = Array.from(instance.props.triggerTarget as Element[]);
const reference = triggerTargets.length ? closestCommonAncestor(triggerTargets) : instance.reference;
const doc = getOwnerDocument(reference);
Everyone Else
: If you've stumbled onto this issue and it is not yet fixed you can use this temporary solution as a replacement for the official followCursor
plugin.
followCursor
solution@okikio singletons weren't designed to be used with followCursor, better off just creating a new instance for each
Thanks for the quick reply. You may want to update the docs, I thought it was available for all instance types.
Bug description
I create a tippy upon response from the server. It works fine without setting followCursor prop but when I set it, most notably 'initial', for the first time a tippy is created this way, it gets placed incorrectly, to translate (0px, 10px). It gets fixed when I move the mouse, but for 'initial' followCursor that doesn't do much. Others get placed likewise at top left of the screen and then get placed correctly on mouse move.
Here is a video of the problem.
Reproduction
https://codepen.io/Korhak/pen/VwyLMax
Edit
I have found the issue. Listener 'addMouseCoordsListener' gets added when I create the tippy and therefore is not called once before the tippy gets created. I have partially solved the issue to at least not placing the tippy to (0, 0) to omit the followCursor property. With this code on line 2173 in onMouseMove function: