\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?",[3165],{"name":3166,"color":3167},"question","d876e3",4286,"Can UColorModeButton be wrapped in a UTooltip?","2025-06-04T11:52:41Z","https://github.com/nuxt/ui/issues/4286",0.78140414,{"description":3174,"labels":3175,"number":3182,"owner":3155,"repository":3156,"state":3183,"title":3184,"updated_at":3185,"url":3186,"score":3187},"### Description\n\nIt would be amazing to be able to add a tooltip for the value, because now slider looks too simple. Please think about it.\n\n### Additional context\n\n_No response_",[3176,3179,3181],{"name":3177,"color":3178},"enhancement","a2eeef",{"name":3180,"color":3153},"wontfix-v2",{"name":3149,"color":3150},1469,"closed","[Slider] Handle tooltip around thumb","2025-05-10T19:27:08Z","https://github.com/nuxt/ui/issues/1469",0.7592943,{"description":3189,"labels":3190,"number":3194,"owner":3155,"repository":3156,"state":3183,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### 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```",[3191,3192,3193],{"name":3177,"color":3178},{"name":3149,"color":3150},{"name":3152,"color":3153},4050,"NavigationMenu has no way to apply a tooltip.","2025-05-10T11:36:41Z","https://github.com/nuxt/ui/issues/4050",0.7661274,{"description":3200,"labels":3201,"number":3205,"owner":3155,"repository":3156,"state":3183,"title":3206,"updated_at":3207,"url":3208,"score":3209},"### Description\n\nWould be great to have an option to let the tooltip track your mouse while hovering over the content. This is useful for large content areas where it's not always clear where the tooltip will be. \n\n### Additional context\n\nhttps://github.com/user-attachments/assets/99ba6a59-a860-408e-b46a-82a56f36e3b8",[3202,3203,3204],{"name":3177,"color":3178},{"name":3149,"color":3150},{"name":3152,"color":3153},4430,"Tooltip mouse tracking","2025-06-30T13:02:07Z","https://github.com/nuxt/ui/issues/4430",0.77957356,{"description":3211,"labels":3212,"number":3216,"owner":3155,"repository":3156,"state":3183,"title":3217,"updated_at":3218,"url":3219,"score":3220},"### Description\n\nWe sometimes want to show optional stuff in Tooltips, but right now this means duplicating the stuff inside the tooltip and putting that behind an if / show.\n\u003Cimg width=\"86\" height=\"41\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/21808b8b-2805-47b2-848b-b36bf28f7666\" />\n\n### Additional context\n\n_No response_",[3213,3214,3215],{"name":3177,"color":3178},{"name":3149,"color":3150},{"name":3152,"color":3153},4566,"Tooltip should not display when there is no value for 'text'","2025-08-12T10:04:09Z","https://github.com/nuxt/ui/issues/4566",0.78132445,{"description":3222,"labels":3223,"number":3232,"owner":3155,"repository":3156,"state":3183,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### 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!",[3224,3225,3226,3227,3230],{"name":3177,"color":3178},{"name":3149,"color":3150},{"name":3152,"color":3153},{"name":3228,"color":3229},"closed-by-bot","ededed",{"name":3231,"color":3229},"stale",3121,"Tooltip API across multiple components (Button/Badge/Checkbox/Icon/...)","2025-06-18T09:02:32Z","https://github.com/nuxt/ui/issues/3121",0.78311026,{"description":3238,"labels":3239,"number":3243,"owner":3155,"repository":3244,"state":3183,"title":3245,"updated_at":3246,"url":3247,"score":3248},"I'm testing a page. And inside the unit test I'd like to access the setup state, so I can execute the `onSuccess` function.\r\nIt is possible but it seems a bit cumbersome, I understand I have to find the component because it's wrapped.\r\n\r\n```js\r\n\u003Ctemplate>\r\n \u003Cdiv>Example\u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup type=\"ts\">\r\nconst { data } = await useDetailData();\r\n\r\nfunction onSuccess() {\r\n window.dispatchEvent(new CustomEvent('success'));\r\n\u003C/script>\r\n```\r\n\r\nThis a unit test, as you can see it's difficult to access the setupState of the wrapped Componened passed to mountSuspended.\r\nOr is this already possible somehow? Else I'd be able to make a PR to expose the setupState for easier access.\r\n\r\n```js\r\nit('should dispatch success event', async () => {\r\n const wrapper = await mountSuspended(DetailPage); // name of file is [...slug].vue\r\n\r\n const spy = vi.spyOn(window, 'dispatchEvent');\r\n // this works\r\n const detailPageWrapper = wrapper.findComponent({ name: '[...slug]'}).componentVM._.setupState;\r\n \r\n // But i'd prefer to use something like this instead: \r\n const detailPageWrapper = wrapper.findComponent({ name: '[...slug]'}).vm\r\n // Or this\r\n wrapper.setupState.onSuccess();\r\n\r\n \r\n detailPageWrapper.onSuccess();\r\n\r\n expect(spy).toHaveBeenCalledWith(\r\n expect.objectContaining({ type: 'success' })\r\n );\r\n});\r\n",[3240],{"name":3241,"color":3242},"vitest-environment","b60205",616,"test-utils","[mountSuspended] Easier access to setupState","2023-12-02T17:18:48Z","https://github.com/nuxt/test-utils/issues/616",0.7850291,{"description":3250,"labels":3251,"number":3257,"owner":3155,"repository":3258,"state":3183,"title":3259,"updated_at":3260,"url":3261,"score":3262},"- **Platinum category** should include all sponsors **paying 1000$ and more** per month\n- **Gold category** should include all sponsors **paying between 500$ and 999$** per month\n- **Silver category** should include all sponsors **paying between 200$ and 499$** per month\n- **Bronze category** should include all sponsors **paying between 100$ and 199$** per month\n- **Backer category** should include all sponsors **paying between 25$ and 99$** per month\n\nbugs detected :\n- FunkHaus, Mirahi, Zen Archi, 64 Robots and Curotech are paying 500$ per month and are listed under Silver sponsors\n- WebReinvent is not even listed\n",[3252,3254],{"name":3146,"color":3253},"ff281a",{"name":3255,"color":3256},"marketing","f5c828",1148,"nuxt.com","Sponsors ranking","2023-06-06T12:14:40Z","https://github.com/nuxt/nuxt.com/issues/1148",0.79555726,{"description":3264,"labels":3265,"number":3271,"owner":3155,"repository":3156,"state":3183,"title":3272,"updated_at":3273,"url":3274,"score":3275},"### 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 ",[3266,3267,3268,3269,3270],{"name":3177,"color":3178},{"name":3149,"color":3150},{"name":3152,"color":3153},{"name":3228,"color":3229},{"name":3231,"color":3229},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.80947405,["Reactive",3277],{},["Set"],["ShallowReactive",3280],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fy9VW6Wtd5iZw2kpMtVoi8Eynix7nSlWtkgItTvA53EQ":-1},"/nuxt/ui/3847"]