[Tooltip/Popover] Allow rendering tooltip/popover in a Vue portal

[gustojs]

Is your feature request related to a problem? Please describe.

Popovers and tooltips should always be rendered at the top of every other element on the page. But since they're rendered at the same place in the DOM as their trigger element, they will render behind other parts of layout with higher z-index than the popover's ancestors in the DOM tree.

Describe the solution you'd like

As an example, Headlessui-Float (a library that combines HeadlessUI with FloatingUI - a new version of Popper) provides in its components a portal prop which renders the popover content at the end of the body, outside of the z-index scope. This permanently solves the problem.

[benjamincanac]

Hello @gustojs,

I was planning to transition Popper to FloatingUI in a near future, it seems Headless UI Float could be the way to go.

As of right now, the Dropdown, Popover and Tooltip defaults to the fixed popper strategy: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts#L640.

[gustojs]

I think Headless UI Float is a good option because it's a low level solution that doesn't hide away any Headless UI functionality. So a robust set of components such as NuxtLabs UI can be built on top of it just like on Headless UI. I like NuxtLabs UI components a lot, they provide the parts that I was missing in raw Headless UI. Good job and thanks for open sourcing it! <3

[sangbk208]

Do we have any updates on this issue?

[benjamincanac]

It is planned for v3 with the radix-vue migration. It will be way easier to achieve with https://www.radix-vue.com/components/tooltip.html#portal.