\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```",[3170,3171,3174],{"name":3140,"color":3141},{"name":3172,"color":3173},"duplicate","cfd3d7",{"name":3143,"color":3144},4333,"closed","USwitch not working inside UTooltip","2025-06-12T13:42:09Z","https://github.com/nuxt/ui/issues/4333",0.7062648,{"description":3182,"labels":3183,"number":3194,"owner":3149,"repository":3150,"state":3176,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### Description\n\nInstead of wrapping a component with UTooltip, a :tool-tip prop could maybe be provided by default in some click/hover based components (limited to just strings)?\n\n```\n\u003CUTooltip text=\"Flip Chessboard\">\n \u003CUButton icon=\"i-material-symbols-sync\" @click=\"flipChessboard()\" />\n\u003C/UTooltip>\n\n=>\n\n\u003CUButton tooltip=\"Flip Chessboard\" icon=\"i-material-symbols-sync\" @click=\"flipChessboard()\" />\n```\n\n### Additional context\n\nI was thinking it could be a handy features since a lot of websites contain clickable/hoverable symbols for their social media/github link/settings/etc. a simple. default tooltip could be very handy. Thanks for your time!",[3184,3187,3188,3189,3192],{"name":3185,"color":3186},"enhancement","a2eeef",{"name":3143,"color":3144},{"name":3146,"color":3147},{"name":3190,"color":3191},"closed-by-bot","ededed",{"name":3193,"color":3191},"stale",3121,"Tooltip API across multiple components (Button/Badge/Checkbox/Icon/...)","2025-06-18T09:02:32Z","https://github.com/nuxt/ui/issues/3121",0.72276366,{"description":3200,"labels":3201,"number":3205,"owner":3149,"repository":3150,"state":3176,"title":3206,"updated_at":3207,"url":3208,"score":3209},"### 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```",[3202,3203,3204],{"name":3140,"color":3141},{"name":3172,"color":3173},{"name":3143,"color":3144},4342,"Switch becomes invisible when wrapped inside a tooltip","2025-06-16T08:22:11Z","https://github.com/nuxt/ui/issues/4342",0.72407824,{"description":3211,"labels":3212,"number":3219,"owner":3149,"repository":3150,"state":3176,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### Description\n\nHi Nuxt UI team 👋\n\nI'm writing tests for components that use Nuxt UI elements like `UTooltip`, and I’ve run into the common injection error:\n\n```\nError: Injection `Symbol(TooltipProviderContext)` not found. Component must be used within `TooltipProvider`\n```\n\nI understand this is because components like `UTooltip` rely on context providers that are normally set up in `\u003CUApp>`. \n\n### Questions:\n\n1. What’s the recommended approach to testing Nuxt UI components like UTooltip, UModal, etc. — especially those that rely on context providers — when using @nuxt/test-utils and @vue/test-utils?\n2. Is wrapping the test component with `\u003CUApp>` considered best practice for these cases? What's the best way to do so? \n3. Could this pattern be documented in Nuxt UI’s testing section (or Nuxt docs) for clarity?\n\nThanks so much for your attention.\n",[3213,3216,3217,3218],{"name":3214,"color":3215},"question","d876e3",{"name":3143,"color":3144},{"name":3190,"color":3191},{"name":3193,"color":3191},4295,"Recommended way to test Nuxt UI components in a Nuxt context","2025-08-20T02:08:22Z","https://github.com/nuxt/ui/issues/4295",0.72568387,{"description":3225,"labels":3226,"number":3230,"owner":3149,"repository":3150,"state":3176,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### Environment\n\nOperating System: Linux\nNode Version: v18.20.3\nNuxt Version: 3.15.4\nCLI Version: 3.21.1\nNitro Version: 2.10.4\nPackage Manager: pnpm@8.15.6\nBuilder: -\nUser Config: modules\nRuntime Modules: @nuxt/ui@2.21.0\nBuild Modules: -\n\n\n### Version\n\n^2.17.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-um7dcx8a?file=app.vue\n\n### Description\n\nIn a Nuxt project using Nuxt UI, when a u-notification appears over a u-slideover, the notification is not clickable. The issue occurs because the u-slideover element blocks interactions with elements positioned above it. \n\nI have provided a reproduction link above where if you open the slideover, a notification appears after 1 sec and the notification is not interactive (action button does not work).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3227,3228,3229],{"name":3140,"color":3141},{"name":3190,"color":3191},{"name":3193,"color":3191},3214,"Bug: u-notification Not Clickable When Positioned Over u-slideoveror or u-modal","2025-06-18T09:02:21Z","https://github.com/nuxt/ui/issues/3214",0.7396896,{"description":3236,"labels":3237,"number":3241,"owner":3149,"repository":3150,"state":3176,"title":3242,"updated_at":3243,"url":3244,"score":3245},"### Description\n\nI was looking to implement tooltip for NavigationMenu links as it was available in the DashboardSidebarLinks component in v2. But seems like the feature is no longer present in v3. \n\nhttps://ui2.nuxt.com/pro/components/dashboard-sidebar-links\n\nLet me know if there is still a simple way to implement tooltips specially in the collapsed Sidebar. I don't wanna go down with the slots approach. It looks dirty.\n\n\n\n### Additional context\n\nThis is what I have to do in order to get it to work. I believe this should be part of Nuxt UI already.\n\n``` js\n\u003CUNavigationMenu :collapsed=\"collapsed\" :items=\"links\" orientation=\"vertical\">\n \u003Ctemplate #item-leading=\"{ item }\">\n \u003CUTooltip :disabled=\"!collapsed\" :text=\"item.label\">\n \u003CUIcon\n :name=\"item.icon || ''\"\n class=\"text-dimmed group-hover:text-default size-5 shrink-0 transition-colors\"\n />\n \u003C/UTooltip>\n \u003C/template>\n\u003C/UNavigationMenu>\n```",[3238,3239,3240],{"name":3185,"color":3186},{"name":3143,"color":3144},{"name":3146,"color":3147},4050,"NavigationMenu has no way to apply a tooltip.","2025-05-10T11:36:41Z","https://github.com/nuxt/ui/issues/4050",0.74550045,{"description":3247,"labels":3248,"number":3254,"owner":3149,"repository":3150,"state":3176,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### Description\n\nIt would be super helpful to have an optional `\u003Cspan>` inside some interactive components like the close button in `\u003CUSlideover>` or icon buttons like `\u003CUButton>` so we can target it with css to increase the touch area for mobile devises without messing up the visual layout\n\nI just watched this video from the TailwindCreator and he speaks about this topic here: https://www.youtube.com/watch?v=soFSSkf4oVY\n\n### why\ncurrently it's not really possible without workarounds\nfor example when I use something like this\n\n```vue\n\u003CUButton\n icon=\"i-lucide-menu\"\n color=\"white\"\n variant=\"ghost\"\n aria-label=\"Open menu\"\n class=\"md:hidden\"\n :ui=\"{ leadingIcon: 'size-7!' }\"\n @click=\"open = true\"\n/>\n```\n\nlooks clean but I can't increase the touch target to 48x48 unless I manually recreate the button content and wrap the icon with a span\nsame with the close button in `\u003CUSlideover>`\nthere's no way to make it more thumb-friendly out of the box\n\n### idea\nmaybe you could include an optional invisible span inside those components\nposition absolute\ncentered\nwe could then style it using `:ui`\nlike\n\n```js\n:ui=\"{ touch: 'size-12' }\"\n```\n\nor even a simple `touchTarget: true` option that adds a 48x48 span behind the icon\n\n### benefits\nbetter usability on mobile\nkeeps component usage clean\nno need for negative margins or layout hacks\nworks nicely with `pointer: coarse` media query\n\nthanks for all your great work with nuxt ui\nwould love to see this added\n\n\n\n### EDIT 1\n\nTo create the same button effect like in the video:\n\n \u003CUButton\n color=\"white\"\n variant=\"ghost\"\n aria-label=\"Open menu\"\n class=\"relative flex items-center justify-center p-0 md:hidden\"\n @click=\"open = true\"\n >\n \u003Cspan class=\"absolute size-12 pointer-coarse:hidden\"/>\n \u003CUIcon name=\"lucide:menu\" class=\"text-white size-7\" />\n \u003C/UButton>\n\nI think it's important that NuxtUI focus on the target touch recommendation of at least 44px x 44px ",[3249,3250,3251,3252,3253],{"name":3185,"color":3186},{"name":3143,"color":3144},{"name":3146,"color":3147},{"name":3190,"color":3191},{"name":3193,"color":3191},3912,"Add optional touch target span inside interactive components like \u003CUSlideover> close button and \u003CUButton> icons","2025-08-12T02:12:40Z","https://github.com/nuxt/ui/issues/3912",0.7510333,{"labels":3260,"number":3266,"owner":3149,"repository":3149,"state":3176,"title":3267,"updated_at":3268,"url":3269,"score":3270},[3261,3263],{"name":3185,"color":3262},"8DEF37",{"name":3264,"color":3265},"2.x","d4c5f9",6580,"Update vue-router dependency to 3.1.x","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6580",0.75164247,["Reactive",3272],{},["Set"],["ShallowReactive",3275],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fwYxUGPGYt27Zmx5iGaRHhE62Cr8z7DLVqeC8g8C4ZCU":-1},"/nuxt/ui/4286"]