Tooltip position is incorrect when using backdrop-blur

[GavinJaynes]

Environment

• Operating System: Windows_NT
• Node Version: v18.18.0
• Nuxt Version: 3.7.4
• CLI Version: 3.9.0
• Nitro Version: 2.6.3
• Package Manager: pnpm@8.8.0
• Builder: -
• User Config: devtools, colorMode, modules, imports, pinia, vue, runtimeConfig
• Runtime Modules: @nuxt/ui@2.9.0, nuxt-icon@0.5.0, @pinia/nuxt@0.4.11, @vueuse/nuxt@10.4.1
• Build Modules: -

Version

v2.9.0

Reproduction

https://stackblitz.com/edit/nuxt-starter-3l6xxj?file=app.vue

Description

When using the Tooltip component inside an element that has the Taillwind backdrop-blur class applied the tooltip position is incorrect.

https://tailwindcss.com/docs/backdrop-blur

Additional context

If there is an additional CSS property to add to the wrapping parent maybe it could be added to the docs.

Logs

No response

[madebyfabian]

Seems related: https://github.com/floating-ui/floating-ui/issues/2333

[jankaderabek]

I face the same issue, it causes that I can't see popover on mobile for example. Have you found any workaround?

[GavinJaynes]

I face the same issue, it causes that I can't see popover on mobile for example. Have you found any workaround?

Hi, my workaround is to remove the backdrop-blur class on the parent element. It's not ideal but works for now.

[acidjazz]

Seems related: floating-ui/floating-ui#2333

Looks like this was fixed, do we just need to update?

[benjamincanac]

We can't fix it in this version as we're using Popper.js. However, in #1289 we migrate all the components to Radix Vue which uses Floating UI underneath.

[acidjazz]

We can't fix it in this version as we're using Popper.js. However, in #1289 we migrate all the components to Radix Vue which uses Floating UI underneath.

CANT WAIT