\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?",[3019],{"name":3020,"color":3021},"question","d876e3",4286,"nuxt","ui","open","Can UColorModeButton be wrapped in a UTooltip?","2025-06-04T11:52:41Z","https://github.com/nuxt/ui/issues/4286",0.7131846,{"description":3031,"labels":3032,"number":3042,"owner":3023,"repository":3024,"state":3025,"title":3043,"updated_at":3044,"url":3045,"score":3046},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.4\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.11.0\n- Builder: -\n- User Config: compatibilityDate, devtools, ssr, future, runtimeConfig, modules, css\n- Runtime Modules: @nuxt/eslint@1.3.1, @nuxt/image@1.10.0, @nuxt/ui@3.1.1, @pinia/nuxt@0.11.0\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/modest-shaw-dwjzc5\n\n### Description\n\n**What I'm trying to do:**\n\nI'm using the `UTooltip` component to show helpful text for buttons that only have icons (no text labels). These tooltips help users understand what each button does.\n\n**The issue:**\n\nI noticed that when a button with a tooltip is also used to open a `UModal`, the tooltip stops working after the modal is opened once. Specifically:\n\n- The tooltip works fine initially.\n- After I click the button (which has the tooltip) and the modal opens, the tooltip no longer appears when hovering over the button.\n- This only happens when the tooltip is on the same button that opens its own modal.\n\n**What I tried:**\n\n- Wrapping the button in `UTooltip`, both inside and outside the `UModal`, but the result is the same.\n- Setting `disableClosingTrigger` to `true` in the tooltip options\n- I added a second modal opened by another button without a tooltip, and that one does not break tooltips elsewhere. So the issue seems to be tied specifically to tooltips on buttons that open their own modal.",[3033,3036,3039],{"name":3034,"color":3035},"bug","d73a4a",{"name":3037,"color":3038},"v3","49DCB8",{"name":3040,"color":3041},"triage","ffffff",4274,"UTooltip breaks when attached to button that opens a UModal","2025-06-02T04:23:45Z","https://github.com/nuxt/ui/issues/4274",0.74393016,{"description":3048,"labels":3049,"number":3052,"owner":3023,"repository":3024,"state":3025,"title":3053,"updated_at":3054,"url":3055,"score":3056},"### 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",[3050,3051],{"name":3020,"color":3021},{"name":3037,"color":3038},4295,"Recommended way to test Nuxt UI components in a Nuxt context","2025-06-05T11:06:58Z","https://github.com/nuxt/ui/issues/4295",0.7499966,{"description":3058,"labels":3059,"number":3065,"owner":3023,"repository":3024,"state":3025,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### Description\n\nUsing `\u003CUNavigationMenu>` it adds an external icon when prop `to` is an external link: \n\n\u003Cimg width=\"196\" height=\"69\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e7417d54-ca16-48c2-9992-a54a9bed764d\" />\n\nUnfortunately, `UButton` doesnt have this feature. Even with the prop `trailingIcon` the same behavior cant be archived manually in an easy manner because the icon wont be small, at the top and grayed out. Currently it would require to make it fully manually:\n\n```\n\u003CUButton :to=\"externalUrl\" target=\"_blank\">\n \u003Cspan\n >To external provider\u003CIcon\n name=\"i-material-symbols:arrow-outward-rounded\"\n class=\"size-3 align-top opacity-70\"\n />\u003C/span>\n \u003C/UButton>\n```\n\n\u003Cimg width=\"191\" height=\"48\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f89198d7-a64f-4a04-815b-41ddba68c3cc\" />\n\nIt would be great if a button would either automatically add the icon, like `\u003CUNavigationMenu>` does, or would have a prop `externalIcon` that can be set to true.\n\n### Additional context\n\n\n\n_No response_",[3060,3063,3064],{"name":3061,"color":3062},"enhancement","a2eeef",{"name":3037,"color":3038},{"name":3040,"color":3041},4501,"Add external icon option to UButton and ULink","2025-07-11T09:39:53Z","https://github.com/nuxt/ui/issues/4501",0.766424,{"description":3071,"labels":3072,"number":3076,"owner":3023,"repository":3024,"state":3077,"title":3078,"updated_at":3079,"url":3080,"score":3081},"### 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```",[3073,3074,3075],{"name":3061,"color":3062},{"name":3037,"color":3038},{"name":3040,"color":3041},4050,"closed","NavigationMenu has no way to apply a tooltip.","2025-05-10T11:36:41Z","https://github.com/nuxt/ui/issues/4050",0.7298621,{"description":3083,"labels":3084,"number":3088,"owner":3023,"repository":3024,"state":3077,"title":3089,"updated_at":3090,"url":3091,"score":3092},"### Description\n\nAs the title says, I think it would be nice to introduce a prop named `square` (like the one for the `Button` component) to be able to have a squared badge for those times where you have only the `icon` and not a label.\n\nCan I get this assigned? I would like to open a PR about this :)\n\n### Additional context\n\n_No response_",[3085,3086,3087],{"name":3061,"color":3062},{"name":3037,"color":3038},{"name":3040,"color":3041},4006,"[Badge] introduce prop `square`","2025-05-13T12:44:24Z","https://github.com/nuxt/ui/issues/4006",0.7562112,{"description":3094,"labels":3095,"number":3096,"owner":3023,"repository":3097,"state":3077,"title":3098,"updated_at":3099,"url":3100,"score":3101},"Hi,\n\nI’ve searched high and low and didn’t find this covered anywhere, apologies if this has been addressed already.\n\nI am using @nuxt/icon with @iconify and the VS Code Intellisense plugin, works great.\n\nI have a custom component that I would like to pass autocompleted string values to, something like:\n\n```html\n\u003CHighlight\n icon-name=\"...\"\n\u003C!-- ^ This should suggest values such as \"bxs:success\" etc, same as the \u003CIcon> component directly -->\n```\n\nI tried this:\n\n```ts\n// Highlight.vue\n\nimport type { ExtractPublicPropTypes } from 'vue';\nimport { Icon } from '#components';\ntype IconName = ExtractPublicPropTypes\u003Ctypeof Icon['name']>\n\nconst props = defineProps\u003C{\n iconName: IconName\n}>()\n```\n\nI get a vague `{} & {}` as the resulting type. Any help appreciated!",[],412,"icon","Infer \u003CIcon> \"name\" as prop to be used in a custom component","2025-07-02T09:24:15Z","https://github.com/nuxt/icon/issues/412",0.75789046,{"description":3103,"labels":3104,"number":3108,"owner":3023,"repository":3024,"state":3077,"title":3109,"updated_at":3110,"url":3111,"score":3112},"### Description\n\nThe [popover](https://ui.nuxt.com/components/popover) uses the content of the default slot to create a trigger, but there is no way to provide a custom anchor. A `\u003Ctemplate #anchor>` slot for this purpose would be great.\n\n```html\n\u003CUFormField label=\"name\" name=\"name\">\n \u003CUPopover :open=\"isAutoCompleteOpen\">\n \u003Ctemplate #anchor>\n \u003CUInput v-model=\"state.name\" />\n \u003C/template>\n \u003Ctemplate #content>\n \u003CPlaceholder class=\"size-48 m-4 inline-flex\" />\n \u003C/template>\n \u003C/UPopover>\n\u003C/UFormField>\n```\n\nMy use case is building an autocomplete for a text input. The `InputMenu` is not suitable because the dropdown is too intrusive.\n\n### Additional context\n\n_No response_",[3105,3106,3107],{"name":3061,"color":3062},{"name":3037,"color":3038},{"name":3040,"color":3041},4013,"Add ability to provide an anchor for the popover","2025-05-22T15:04:18Z","https://github.com/nuxt/ui/issues/4013",0.7580323,{"description":3114,"labels":3115,"number":3118,"owner":3023,"repository":3024,"state":3077,"title":3119,"updated_at":3120,"url":3121,"score":3122},"### Description\n\nHi. So, I am wondering what exactly is the usage of the `external` prop for the `ULink` component.\n\n`\u003CULink href=\"https://nuxt.com\">Link\u003C/ULink>`\n\nWithout using the `external` prop, it already adds `rel=\"noopener noreferrer\"` to the rendered link element.\n\nif you use it like that\n\n`\u003CULink href=\"/test\" external>Link\u003C/ULink>`\n\nIt doesn't add `rel=\"noopener noreferrer\"`, even tho `external` prop is added, because the component knows this is not an external link.\n\nSo my question is - what is actually the usage of the `external` prop? If there are some edge cases I can't think of, it would be a good idea to update the documentation to show an example why it's helpful to have it.\n\nThank you!",[3116,3117],{"name":3020,"color":3021},{"name":3037,"color":3038},4502,"External prop for links?","2025-07-11T09:55:24Z","https://github.com/nuxt/ui/issues/4502",0.76275134,{"description":3124,"labels":3125,"number":3131,"owner":3023,"repository":3024,"state":3077,"title":3132,"updated_at":3133,"url":3134,"score":3135},"### 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```",[3126,3127,3130],{"name":3034,"color":3035},{"name":3128,"color":3129},"duplicate","cfd3d7",{"name":3037,"color":3038},4333,"USwitch not working inside UTooltip","2025-06-12T13:42:09Z","https://github.com/nuxt/ui/issues/4333",0.7635844,["Reactive",3137],{},["Set"],["ShallowReactive",3140],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQTkWPUxSA2xcSq4UDCNSSvDMESeLFmSs6Oe00FGQoU8":-1},"/nuxt/ui/3121"]