Nuxt•2w ago

Tooltip on tab trigger?

Can I wrap my triggers in a UTooltip somehow? Here's the source of UTabs: https://github.com/nuxt/ui/blob/v3/src/runtime/components/Tabs.vue

GitHub

ui/src/runtime/components/Tabs.vue at v3 · nuxt/ui

The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS. - nuxt/ui

5 Replies

kapa.ai•2w ago

Hi @pearbender. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the available knowledge sources, there is no explicit documentation or example showing direct support for wrapping UTabs triggers in a UTooltip, nor is there a documented prop or slot on UTabs for adding tooltips to tab triggers. The Tabs component allows customization of tab items (triggers) via the items prop, which supports properties like label, icon, avatar, slot, and class, but there is no mention of a tooltip property or a slot specifically for wrapping triggers with tooltips in the official documentation or examples provided for UTabs. The NavigationMenu component, by contrast, does support a tooltip property for its items, but this is not documented for UTabsTabs Usage, NavigationMenu with Tooltips. If you need tooltips on tab triggers, you may need to implement a custom solution, such as using the custom slot feature of UTabs to render your own trigger content and manually wrap it in UTooltip. However, this approach is not explicitly documented in the provided sources, so its feasibility and implementation details are not confirmed here. In summary:
I'm sorry, but the knowledge sources do not explicitly mention support for wrapping UTabs triggers in a UTooltip or adding tooltips to tab triggers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@779279431419559947> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

pearbenderOP•2w ago

@kapa.ai What custom slot are you referring to?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The "custom slot" I referred to is the feature in UTabs where you can use the slot property on a tab item to define a named slot for that specific tab. This allows you to customize the content of individual tab panels, not the tab triggers themselves. For example, in the documentation, you can define items like this:

const items = [
  {
    label: 'Account',
    slot: 'account' as const
  },
  {
    label: 'Password',
    slot: 'password' as const
  }
]

const items = [
  {
    label: 'Account',
    slot: 'account' as const
  },
  {
    label: 'Password',
    slot: 'password' as const
  }
]

And then use the slots in your template:

<UTabs :items="items">
  <template #account="{ item }">
    <!-- Custom content for the Account tab panel -->
  </template>
  <template #password="{ item }">
    <!-- Custom content for the Password tab panel -->
  </template>
</UTabs>

<UTabs :items="items">
  <template #account="{ item }">
    <!-- Custom content for the Account tab panel -->
  </template>
  <template #password="{ item }">
    <!-- Custom content for the Password tab panel -->
  </template>
</UTabs>

However, according to the knowledge sources, these custom slots are for customizing the tab panel content, not the tab triggers (the clickable tabs themselves). There is no documented way to use a slot to customize or wrap the tab triggers with another component like UTooltip. The documentation does not mention a slot or prop for this purpose in UTabs, unlike NavigationMenu, which does support tooltips on itemsTabs Examples. So, to clarify:
The custom slot in UTabs is for customizing the tab panel content, not the tab triggers. There is no information in the knowledge sources about customizing the tab triggers with a slot or wrapping them in a UTooltip. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@779279431419559947> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Tooltip on tab trigger?

Did you find this page helpful?