[Bug]: Tooltip not showing up when rendered on the server

[remonke]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: pnpm@8.6.0
Radix Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.3.3
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-hrb7vm?file=app.vue%2Cnuxt.config.ts

Steps to reproduce

Render a Tooltip using SSR and try to use it upon client-side hydration.

Describe the bug

As in the title.

Expected behavior

No response

Context & Screenshots (if applicable)

No response

[remonke]

Okay I discovered the issue is with the way the event handlers are bound to the TooltipTrigger. The event listeners come from a computed, with for some reason doesn't play with SSR.

v-bind="tooltipListeners"

I suggest using some alternative way to disable the Tooltip (perhaps keeping the listeners, and just make them do nothing?). I added the example in the reproduction demo.

[nethriis]

I have the same issue but the way you handle that error with ClientOnly is dirty, it doesn't display the element inside TooltipTrigger on the server rendering.