Environment

Operating System: Linux
Node Version: v20.12.0
Nuxt Version: 3.16.0
CLI Version: 3.22.5
Nitro Version: 2.11.6
Package Manager: pnpm@8.15.6
Builder: -
User Config: modules, devtools, compatibilityDate, future
Runtime Modules: @nuxt/ui@3.0.0
Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0

Reproduction

https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks

Description

If you put a Switch inside a Tooltip, the Switch loses styling.

<UTooltip text="tooltip text">
  <USwitch label="switch label" />
</UTooltip>

The reason is that both the tooltip and the switch are dependent on the data-state property of the element. Switch creates two divs around the button (which data-state it follows) but the tooltip targets the same button thus causing problems. The fix would be that the tooltip would use the data-state of the outermost switch container div.

Workaround is to put the switch inside a div like this:

<UTooltip text="tooltip text">
  <div>
    <USwitch label="switch label" />
  </div>
</UTooltip>

Additional context