\n\u003C/UTooltip>\n```\n\nUnfortunately, the tooltip gets pushed to the top-left corner of the viewport. Am I missing something or doing anything incorrectly here?",[3080],{"name":3081,"color":3082},"question","d876e3",4286,"Can UColorModeButton be wrapped in a UTooltip?","2025-06-04T11:52:41Z","https://github.com/nuxt/ui/issues/4286",0.71477425,{"description":3089,"labels":3090,"number":3096,"owner":3028,"repository":3029,"state":3097,"title":3098,"updated_at":3099,"url":3100,"score":3101},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.17.5`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `pnpm@10.11.1`\n- Builder: `-`\n- User Config: `ssr`, `devtools`, `modules`, `css`, `app`, `runtimeConfig`, `i18n`, `icon`, `devServer`, `colorMode`, `compatibilityDate`, `future`, `typescript`, `vite`\n- Runtime Modules: `@nuxt/ui@3.0.1`, `@pinia/nuxt@0.5.5`, `@nuxt/eslint@0.5.7`, `@nuxtjs/i18n@9.5.5`, `@nuxtjs/device@3.2.4`, `@nuxt/image@1.10.0`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.1\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nWhen using `USwitch` inside `UTooltip` switch toggle just disappears. You can check reproduction link.\n```vue\n\u003CUTooltip text=\"Just a tooltip\">\n \u003CUSwitch label=\"Just a switch\" />\n\u003C/UTooltip>\n```\n\n\u003Cimg width=\"127\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/5dbcfef5-a4c4-4ec4-b2f3-611212f75c68\" />\n\n### Additional context\n\nWrapping `USwitch` to `div` for example solves issue\n```vue\n \u003CUTooltip text=\"Just a tooltip\">\n \u003Cdiv>\n \u003CUSwitch label=\"'Hackish'\" />\n \u003C/div>\n \u003C/UTooltip>\n```\n\n### Logs\n\n```shell-script\n\n```",[3091,3092,3095],{"name":3019,"color":3020},{"name":3093,"color":3094},"duplicate","cfd3d7",{"name":3022,"color":3023},4333,"closed","USwitch not working inside UTooltip","2025-06-12T13:42:09Z","https://github.com/nuxt/ui/issues/4333",0.66932845,{"description":3103,"labels":3104,"number":3108,"owner":3028,"repository":3029,"state":3097,"title":3109,"updated_at":3110,"url":3111,"score":3112},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: ^3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: -\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate, formkit\n- Runtime Modules: @nuxt/ui@^3.1.3, @nuxt/eslint@^1.4.1, @formkit/nuxt@^1.6.9\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/gallant-scooby-hcy72z\n\n### Description\n\nI am upgrading my app to use Nuxt UI v3 and am having issues with `UModal` and [FormKit](https://formkit.com/).\n\nI am unable to open a modal with a FormKit modal inside of it. I get the following error.\n\n\u003Cimg width=\"557\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/dc0baba8-ed91-4006-9164-5e9e1fa6c67a\" />\n\nI believe this is an issue with Nuxt UI and not FormKit because it used to work fine on the previous version.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nindex.vue:17 [Vue warn]: Unhandled error during execution of mounted hook \n at \u003CDialogTrigger key=0 as-child=\"\" class=\"\" > \n at \u003CDialogRoot modal=true open=true onAfter:leave=fn ... > \n at \u003CUModal close= {onClick: ƒ} title=\"This modal was opened programmatically 0 times\" open=true ... > \n at \u003CModalExample key= Symbol(useOverlay) ref_for=true count=0 ... > \n at \u003CUOverlayProvider > \n at \u003CTooltipProvider > \n at \u003CConfigProvider use-id=fn\u003Cuse-id> dir=undefined locale=undefined > \n at \u003CApp > \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\nwarn$1 @ runtime-core.esm-bundler.js?v=fb91d406:50\nlogError @ runtime-core.esm-bundler.js?v=fb91d406:261\nhandleError @ runtime-core.esm-bundler.js?v=fb91d406:253\ncallWithErrorHandling @ runtime-core.esm-bundler.js?v=fb91d406:199\ncallWithAsyncErrorHandling @ runtime-core.esm-bundler.js?v=fb91d406:204\nhook.__weh.hook.__weh @ runtime-core.esm-bundler.js?v=fb91d406:2842\nflushPostFlushCbs @ runtime-core.esm-bundler.js?v=fb91d406:382\nflushJobs @ runtime-core.esm-bundler.js?v=fb91d406:424\nPromise.then\nqueueFlush @ runtime-core.esm-bundler.js?v=fb91d406:319\nqueueJob @ runtime-core.esm-bundler.js?v=fb91d406:314\neffect2.scheduler @ runtime-core.esm-bundler.js?v=fb91d406:5499\ntrigger @ reactivity.esm-bundler.js?v=fb91d406:235\nendBatch @ reactivity.esm-bundler.js?v=fb91d406:293\ntrigger @ reactivity.esm-bundler.js?v=fb91d406:693\nset @ reactivity.esm-bundler.js?v=fb91d406:974\nopen @ useOverlay.js?v=fb91d406:29\nopen @ useOverlay.js?v=fb91d406:18\nopen @ index.vue:17\n(anonymous) @ Button.vue:80\nonClickWrapper @ Button.vue:80\nonClickWrapper @ LinkBase.vue:30\ncallWithErrorHandling @ runtime-core.esm-bundler.js?v=fb91d406:197\ncallWithAsyncErrorHandling @ runtime-core.esm-bundler.js?v=fb91d406:204\ninvoker @ runtime-dom.esm-bundler.js?v=fb91d406:720\nuseForwardExpose.js?v=fb91d406:8 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nodeName')\n at ComputedRefImpl.fn (useForwardExpose.js?v=fb91d406:8:64)\n at refreshComputed (reactivity.esm-bundler.js?v=fb91d406:361:29)\n at get value (reactivity.esm-bundler.js?v=fb91d406:1567:5)\n at DialogTrigger.js?v=fb91d406:19:57\n at runtime-core.esm-bundler.js?v=fb91d406:2862:40\n at callWithErrorHandling (runtime-core.esm-bundler.js?v=fb91d406:197:19)\n at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?v=fb91d406:204:17)\n at hook.__weh.hook.__weh (runtime-core.esm-bundler.js?v=fb91d406:2842:19)\n at flushPostFlushCbs (runtime-core.esm-bundler.js?v=fb91d406:382:28)\n at flushJobs (runtime-core.esm-bundler.js?v=fb91d406:424:5)\n```",[3105,3106,3107],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4309,"UModal does not work with FormKit","2025-06-07T23:36:34Z","https://github.com/nuxt/ui/issues/4309",0.6759942,{"description":3114,"labels":3115,"number":3124,"owner":3028,"repository":3029,"state":3097,"title":3125,"updated_at":3126,"url":3127,"score":3128},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v23.9.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.5.2\n- Builder: -\n- User Config: devtools, css, colorMode, modules, imports, nitro, lodash, icon, components, ssr, $production, runtimeConfig, compatibilityDate\n- Runtime Modules: @nuxt/ui-pro@3.1.3, @pinia/nuxt@0.5.5, nuxt-lodash@2.5.3\n- Build Modules: -\n------------------------------\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.5\n\n### Reproduction\n\nUTooltip occasionally does not display\n\n### Description\n\nUTooltip occasionally does not display\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3116,3117,3120,3121],{"name":3019,"color":3020},{"name":3118,"color":3119},"needs reproduction","CB47CF",{"name":3022,"color":3023},{"name":3122,"color":3123},"closed-by-bot","ededed",4408,"UTooltip occasionally does not display","2025-07-05T02:13:30Z","https://github.com/nuxt/ui/issues/4408",0.6783893,{"description":3130,"labels":3131,"number":3135,"owner":3028,"repository":3029,"state":3097,"title":3136,"updated_at":3137,"url":3138,"score":3139},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v22.16.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.9\n- Package Manager: pnpm@10.12.1\n- Builder: -\n- User Config: compatibilityDate, devtools, devServer, ssr, runtimeConfig, hooks, css, colorMode, components, modules, ui, i18n, zodI18n\n- Runtime Modules: @nuxt/eslint@1.3.0, @nuxt/test-utils@3.17.2, @nuxt/ui-pro@3.1.3, nuxt-zod-i18n@1.11.5, @nuxtjs/i18n@9.5.3, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.1.0, dayjs-nuxt@2.1.11, nuxt-qrcode@0.4.1\n- Build Modules: -\n------------------------------\n\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\n👉 Read documentation: https://nuxt.com\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nTry a combination of USwitch and UTooltip like this:\n\n```\n \u003Cu-tooltip\n :disabled=\"isPhoneNumberSet\"\n :delay-duration=\"250\"\n :ui=\"{ content: 'bg-warning' }\"\n >\n \u003Cu-switch\n :model-value=\"notifications.smsWarnings\"\n :disabled=\"!isPhoneNumberSet\"\n :loading=\"isLoadingSmsWarnings\"\n color=\"secondary\"\n @update:model-value=\"$emit('update:sms-warnings', $event)\"\n />\n\n \u003Ctemplate #content>Add a phone number first\u003C/template>\n \u003C/u-tooltip>\n```\n\n### Description\n\nThe switch on its own works perfectly. But if I wrap it inside of a tooltip, it loses its background color.\n\nIn the provided screenshot you can barely see the switch thumb, but not the background.\n\nI think the problem is somewhere in the base slot but was unable to come up with a reliable solution.\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[3132,3133,3134],{"name":3019,"color":3020},{"name":3093,"color":3094},{"name":3022,"color":3023},4342,"Switch becomes invisible when wrapped inside a tooltip","2025-06-16T08:22:11Z","https://github.com/nuxt/ui/issues/4342",0.6787483,["Reactive",3141],{},["Set"],["ShallowReactive",3144],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8RP-eN7rm7GYVB6V8aCnSRWfxk6cjQ_t8BOwQZ3TIzg":-1},"/nuxt/ui/4274"]