Tippyjs: interactive: true prevents tooltip to be seen in React app

[Robloche]

Bug description

In v3.x, when I create the tooltip with interactive: true, it simply does not show...
The tooltip's state is OK, though:

currentPlacement: "bottom"
isDestroyed: false
isEnabled: true
isMounted: true
isShown: false
isVisible: true

I can also see it in the DOM with the attribute data-state="visible" and the CSS property visibility: visible.
But I can't see the tooltip on the screen.

On the other hand, if I create the tooltip with interactive: false, then open it, then use instance.setProps({interactive: true});, I can click in my tooltip (it's a contextual menu).

interactive: true was working perfectly in v2.x.

[atomiks]

appendTo={document.body}

in v5 the default is to append interactive ones to the reference's parentNode which may cause this problem in some scenarios -- just wondering, how can you not see it though? Would be useful to add to FAQ

I have this section on "clipping issues" but I wasn't sure when that actually occurs

[Robloche]

Great!
Adding appendTo: document.body at creation fixed my issue.

Regarding why the tooltip was invisible, I've just figured it out.
The tooltip was rendered in the ref element's parent node. And this node had the property overflow: hidden.

Thanks again for your help!

[atomiks]

The tooltip was rendered in the ref element's parent node. And this node had the property overflow: hidden.

This is what I suspected but I can't reproduce it on my website with that property and idk why 😩😩

[atomiks]

@Robloche if you're able to create a Codepen reproducing the clipping/invisible issue it would be very helpful

This kind of setup has no problems: https://codepen.io/atomiks/pen/jOOPGGr

[Robloche]

I'll give it a try.

[Robloche]

Got it!
My container has the following property: position: fixed;
And indeed, adding it to you CodePen partially hides the tooltip.

https://codepen.io/robloche/pen/dyyoZeY

[Robloche]

And this can be fixed with:

popperOptions: {
  positionFixed: true
}

Found in: https://github.com/atomiks/tippyjs/issues/589

[atomiks]

Great thank you 😃