fix(NavigationMenu): only display tooltip when collapsed

benjamincanac · benjamincanac · commit 44f536fd0034 · 2025-05-20T17:06:20.000+02:00
diff --git a/playground/app/pages/components/navigation-menu.vue b/playground/app/pages/components/navigation-menu.vue
@@ -22,6 +22,9 @@ const items = [
     label: 'Documentation',
     icon: 'i-lucide-book-open',
     badge: 10,
+    tooltip: {
+      text: 'Documentation'
+    },
     children: [{
       label: 'Introduction',
       description: 'Fully styled and customizable components for Nuxt.',
@@ -42,9 +45,12 @@ const items = [
   }, {
     label: 'Components',
     icon: 'i-lucide-box',
-    to: '/components',
+    to: '/components/navigation-menu',
     active: true,
     defaultOpen: true,
+    tooltip: {
+      text: 'Components'
+    },
     children: [{
       label: 'Link',
       icon: 'i-lucide-link',
@@ -81,11 +87,17 @@ const items = [
     label: 'GitHub',
     icon: 'i-simple-icons-github',
     to: 'https://github.com/nuxt/ui',
-    target: '_blank'
+    target: '_blank',
+    tooltip: {
+      text: 'GitHub'
+    }
   }, {
     label: 'Help',
     icon: 'i-lucide-circle-help',
-    disabled: true
+    disabled: true,
+    tooltip: {
+      text: 'Help'
+    }
   }]
 ]
 </script>
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
@@ -288,8 +288,8 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) {
           :disabled="item.disabled"
           @select="item.onSelect"
         >
-          <UTooltip v-if="!!item.tooltip" :content="{ side: 'right' }" v-bind="item.tooltip">
-            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+          <UTooltip v-if="!!item.tooltip && orientation === 'vertical' && collapsed" :content="{ side: 'right' }" v-bind="item.tooltip">
+            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active, disabled: !!item.disabled, level: level > 0 })">
               <ReuseLinkTemplate :item="item" :active="active" :index="index" />
             </ULinkBase>
           </UTooltip>
