From 44f536fd0034facb3550d910fae71d4f9442ed19 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 20 May 2025 16:46:36 +0200
Subject: [PATCH] fix(NavigationMenu): only display `tooltip` when collapsed

---
 .../app/pages/components/navigation-menu.vue   | 18 +++++++++++++++---
 src/runtime/components/NavigationMenu.vue      |  4 ++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/playground/app/pages/components/navigation-menu.vue b/playground/app/pages/components/navigation-menu.vue
index 237e4024..633077ee 100644
--- 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
index db98b217..4a12d717 100644
--- 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>