Some tooltips show in top left of screen, transform has wrong values

[em-rad]

Bug description

Some instances of our tippy tooltips are showing in the top-left screen of only some monitors / instances of Chrome, it can be replicated on mac & windows.

We have just started using Taiga UI & Tailwind CSS but neither explicitly touch our tooltip instances.

Reproduction

Popperjs/core: 2.5.3 Popper.js: 1.16.1 Tippy.js: 6.1.0

Options: allowHTML: true animateFill: false animation: "fade" appendTo: ()=> {…} aria: {expanded: true, content: null} arrow: true content: "Text goes here" delay: 0 duration: 100 followCursor: false getReferenceClientRect: null hideOnClick: true ignoreAttributes: false inertia: false inlinePositioning: false interactive: true interactiveBorder: 2 interactiveDebounce: 0 maxWidth: 220 moveTransition: "" offset: (2) [0, 12] onAfterUpdate: ƒ () onBeforeUpdate: ƒ () onClickOutside: ƒ () onCreate: t=> {…} onDestroy: ƒ () onHidden: ƒ () onHide: ƒ () onMount: ƒ () onShow: ƒ () onShown: ƒ () onTrigger: ƒ () onUntrigger: ƒ () placement: "bottom" plugins: [] popperOptions: {modifiers: Array(1)} render: ƒ H(t) role: "tooltip" showOnCreate: false sticky: false theme: "inverse" touch: true trigger: "mouseenter focus" triggerTarget: null zIndex: 9999

[atomiks]

This usually means the reference element the tippy is positioned near doesn't exist on the DOM for some reason. The tippyInstance.reference property points to what?

[atomiks]

Without a reproduction it's not possible to help here; closing for now

[eirikhm]

I had the same issue, and it turns out it was related to re-rendering. Showing the tooltip in the next tick positioned it correctly.

[Aribaskar-jb]

Hi How the change the transform @em-rad