From 1d81ae3739473329f62916b45839e2199fc58ed9 Mon Sep 17 00:00:00 2001
From: Sai Sridhar <tarrasridhar1154@gmail.com>
Date: Sat, 18 Jul 2026 22:43:35 +0530
Subject: [PATCH] feat(docs): replace remaining native title= attributes with
 Tooltip (#495)

Continue the #495 migration for the remaining docs components:

- DocsAskPanel.vue: 4 icon buttons (Open in Bin, Copy conversation,
  Reset conversation, Fullscreen toggle) converted to Tooltip wrappers
- DocsExampleCodePane.vue: 'Collapse code' button wrapped in Tooltip
- DocsCodeActions.vue: 5 GnActionButton instances wrapped via renderless
  Tooltip.Activator (spreads hover/focus attrs through inheritAttrs)
- AppSettingsSheet.vue: Sign out button replaced with Tooltip.Activator
- AppSettingsTheme.vue: Copy theme button wrapped in Tooltip
- AppThemeCustomButton.vue: Edit theme button wrapped in Tooltip
- HomeInstallCommand.vue: Popover.Activator for package manager wrapped
  via renderless Tooltip.Activator inside Popover.Root
- AppSearchInline.vue: redundant title= removed (button already has
  aria-label and visible text content)
---
 .../src/components/app/AppSearchInline.vue    |   1 -
 .../src/components/app/AppSettingsSheet.vue   |  25 ++--
 .../app/settings/AppSettingsTheme.vue         |  24 ++-
 .../app/theme/AppThemeCustomButton.vue        |  25 ++--
 .../docs/src/components/docs/DocsAskPanel.vue |  96 +++++++-----
 .../src/components/docs/DocsCodeActions.vue   | 137 ++++++++++++------
 .../components/docs/DocsExampleCodePane.vue   |  26 ++--
 .../components/home/HomeInstallCommand.vue    |  28 ++--
 8 files changed, 229 insertions(+), 133 deletions(-)

diff --git a/apps/docs/src/components/app/AppSearchInline.vue b/apps/docs/src/components/app/AppSearchInline.vue
index 5a4d137568..0c54525035 100644
--- a/apps/docs/src/components/app/AppSearchInline.vue
+++ b/apps/docs/src/components/app/AppSearchInline.vue
@@ -11,7 +11,6 @@
   <button
     aria-label="Search (Ctrl+K)"
     :class="['inline-flex items-center gap-1.5 rounded-full border border-divider pl-1.5 pr-1.5 py-1.5 hover:border-primary/50 focus-visible:border-primary focus-visible:outline-none transition-colors', settings.showBgGlass.value ? 'bg-glass-surface' : 'bg-surface']"
-    title="Search (Ctrl+K)"
     type="button"
     @click="search.open"
   >
diff --git a/apps/docs/src/components/app/AppSettingsSheet.vue b/apps/docs/src/components/app/AppSettingsSheet.vue
index 322eaa079a..37e6b8b8b0 100644
--- a/apps/docs/src/components/app/AppSettingsSheet.vue
+++ b/apps/docs/src/components/app/AppSettingsSheet.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   // Framework
-  import { Avatar, useFeatures, useRtl, useStack, useStorage } from '@vuetify/v0'
+  import { Avatar, Tooltip, useFeatures, useRtl, useStack, useStorage } from '@vuetify/v0'
 
   // Components
   import { Discovery } from '@/components/discovery'
@@ -114,15 +114,20 @@
           <div class="text-xs text-on-surface-variant capitalize">{{ auth.user?.role }}</div>
         </div>
 
-        <button
-          aria-label="Sign out"
-          class="pa-1 cursor-pointer bg-transparent border-0 inline-flex items-center justify-center rounded hover:bg-surface-variant transition-colors text-on-surface-variant hover:text-error"
-          title="Sign out"
-          type="button"
-          @click="auth.logout()"
-        >
-          <AppIcon icon="logout" :size="16" />
-        </button>
+        <Tooltip.Root :close-delay="100" :open-delay="500">
+          <Tooltip.Activator
+            aria-label="Sign out"
+            class="pa-1 cursor-pointer bg-transparent border-0 inline-flex items-center justify-center rounded hover:bg-surface-variant transition-colors text-on-surface-variant hover:text-error"
+            type="button"
+            @click="auth.logout()"
+          >
+            <AppIcon icon="logout" :size="16" />
+          </Tooltip.Activator>
+
+          <Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
+            Sign out
+          </Tooltip.Content>
+        </Tooltip.Root>
       </div>
 
       <!-- Theme -->
diff --git a/apps/docs/src/components/app/settings/AppSettingsTheme.vue b/apps/docs/src/components/app/settings/AppSettingsTheme.vue
index 6512a2712a..021a924c25 100644
--- a/apps/docs/src/components/app/settings/AppSettingsTheme.vue
+++ b/apps/docs/src/components/app/settings/AppSettingsTheme.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+  // Framework
+  import { Tooltip } from '@vuetify/v0'
+
   // Composables
   import { useClipboard } from '@/composables/useClipboard'
   import { useCustomThemes } from '@/composables/useCustomThemes'
@@ -44,14 +47,19 @@
         <AppIcon icon="paint" size="16" />
         <span>Theme</span>
 
-        <button
-          class="ml-auto p-1 rounded hover:bg-surface-tint transition-colors inline-flex items-center justify-center shrink-0"
-          title="Copy theme as Vuetify0 config"
-          type="button"
-          @click="exportTheme"
-        >
-          <AppIcon :icon="clipboard.copied.value ? 'check-circle' : 'copy'" size="14" />
-        </button>
+        <Tooltip.Root :close-delay="100" :open-delay="500">
+          <Tooltip.Activator
+            class="ml-auto p-1 rounded hover:bg-surface-tint transition-colors inline-flex items-center justify-center shrink-0"
+            type="button"
+            @click="exportTheme"
+          >
+            <AppIcon :icon="clipboard.copied.value ? 'check-circle' : 'copy'" size="14" />
+          </Tooltip.Activator>
+
+          <Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
+            Copy theme as Vuetify0 config
+          </Tooltip.Content>
+        </Tooltip.Root>
       </h3>
 
       <!-- Mode -->
diff --git a/apps/docs/src/components/app/theme/AppThemeCustomButton.vue b/apps/docs/src/components/app/theme/AppThemeCustomButton.vue
index db3a4fc2f9..645c7bdc03 100644
--- a/apps/docs/src/components/app/theme/AppThemeCustomButton.vue
+++ b/apps/docs/src/components/app/theme/AppThemeCustomButton.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+  // Framework
+  import { Tooltip } from '@vuetify/v0'
+
   // Composables
   import { useCustomThemes } from '@/composables/useCustomThemes'
   import { useThemeToggle, type ThemePreference } from '@/composables/useThemeToggle'
@@ -43,15 +46,19 @@
       <AppIcon :icon="theme.icon" size="16" />
       <span class="font-medium truncate">{{ theme.label }}</span>
 
-      <button
-        v-if="editable"
-        class="ml-auto opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-surface-tint transition-all"
-        title="Edit theme"
-        type="button"
-        @click="onEdit"
-      >
-        <AppIcon icon="edit" size="12" />
-      </button>
+      <Tooltip.Root v-if="editable" :close-delay="100" :open-delay="500">
+        <Tooltip.Activator
+          class="ml-auto opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-surface-tint transition-all"
+          type="button"
+          @click="onEdit"
+        >
+          <AppIcon icon="edit" size="12" />
+        </Tooltip.Activator>
+
+        <Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
+          Edit theme
+        </Tooltip.Content>
+      </Tooltip.Root>
     </div>
 
     <AppThemePreview :theme="themeId" />
diff --git a/apps/docs/src/components/docs/DocsAskPanel.vue b/apps/docs/src/components/docs/DocsAskPanel.vue
index 6ce31db02d..a5dbc0c969 100644
--- a/apps/docs/src/components/docs/DocsAskPanel.vue
+++ b/apps/docs/src/components/docs/DocsAskPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   // Framework
-  import { isNull, useBreakpoints } from '@vuetify/v0'
+  import { isNull, Tooltip, useBreakpoints } from '@vuetify/v0'
 
   // Components
   import AppIcon from '@/components/app/AppIcon.vue'
@@ -178,45 +178,61 @@
         </div>
 
         <div class="flex items-center gap-0.5">
-          <button
-            v-if="messages.length > 0"
-            class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
-            title="Open in Bin"
-            type="button"
-            @click="openInBin"
-          >
-            <AppIcon icon="vuetify-bin" size="16" />
-          </button>
-
-          <button
-            v-if="messages.length > 0"
-            class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
-            :title="clipboard.copied.value ? 'Copied!' : 'Copy conversation'"
-            type="button"
-            @click="copyConversation"
-          >
-            <AppIcon :icon="clipboard.copied.value ? 'success' : 'copy'" size="16" />
-          </button>
-
-          <button
-            v-if="messages.length > 0"
-            class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
-            title="Reset conversation"
-            type="button"
-            @click="emit('clear')"
-          >
-            <AppIcon icon="restart" size="16" />
-          </button>
-
-          <button
-            v-if="isDesktop"
-            class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
-            :title="fullscreen ? 'Exit fullscreen' : 'Fullscreen'"
-            type="button"
-            @click="emit('update:fullscreen', !fullscreen)"
-          >
-            <AppIcon :icon="fullscreen ? 'fullscreen-exit' : 'fullscreen'" size="16" />
-          </button>
+          <Tooltip.Root v-if="messages.length > 0" :close-delay="100" :open-delay="500">
+            <Tooltip.Activator
+              class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
+              type="button"
+              @click="openInBin"
+            >
+              <AppIcon icon="vuetify-bin" size="16" />
+            </Tooltip.Activator>
+
+            <Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
+              Open in Bin
+            </Tooltip.Content>
+          </Tooltip.Root>
+
+          <Tooltip.Root v-if="messages.length > 0" :close-delay="100" :open-delay="500">
+            <Tooltip.Activator
+              class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
+              type="button"
+              @click="copyConversation"
+            >
+              <AppIcon :icon="clipboard.copied.value ? 'success' : 'copy'" size="16" />
+            </Tooltip.Activator>
+
+            <Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
+              {{ clipboard.copied.value ? 'Copied!' : 'Copy conversation' }}
+            </Tooltip.Content>
+          </Tooltip.Root>
+
+          <Tooltip.Root v-if="messages.length > 0" :close-delay="100" :open-delay="500">
+            <Tooltip.Activator
+              class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
+              type="button"
+              @click="emit('clear')"
+            >
+              <AppIcon icon="restart" size="16" />
+            </Tooltip.Activator>
+
+            <Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
+              Reset conversation
+            </Tooltip.Content>
+          </Tooltip.Root>
+
+          <Tooltip.Root v-if="isDesktop" :close-delay="100" :open-delay="500">
+            <Tooltip.Activator
+              class="inline-flex p-1.5 rounded-lg hover:bg-surface-variant transition-colors text-on-surface/60 hover:text-on-surface-variant"
+              type="button"
+              @click="emit('update:fullscreen', !fullscreen)"
+            >
+              <AppIcon :icon="fullscreen ? 'fullscreen-exit' : 'fullscreen'" size="16" />
+            </Tooltip.Activator>
+
+            <Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
+              {{ fullscreen ? 'Exit fullscreen' : 'Fullscreen' }}
+            </Tooltip.Content>
+          </Tooltip.Root>
 
           <AppCloseButton @click="emit('close')" />
         </div>
diff --git a/apps/docs/src/components/docs/DocsCodeActions.vue b/apps/docs/src/components/docs/DocsCodeActions.vue
index 219a5b8cd0..b639a98d15 100644
--- a/apps/docs/src/components/docs/DocsCodeActions.vue
+++ b/apps/docs/src/components/docs/DocsCodeActions.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-  // Framework
   import { GnActionButton } from '@paper/genesis'
 
+  // Framework
+  import { Tooltip } from '@vuetify/v0'
+
   // Composables
   import { getBinUrl } from '@/composables/bin'
   import { useClipboard } from '@/composables/useClipboard'
@@ -51,49 +53,94 @@
 
 <template>
   <div class="flex gap-1">
-    <GnActionButton
-      v-if="playground"
-      aria-label="Open in Vuetify Play"
-      title="Open in Vuetify Play"
-      @click="openInPlayground"
-    >
-      <AppIcon icon="vuetify-play" :size="16" />
-    </GnActionButton>
-
-    <GnActionButton
-      v-if="bin"
-      aria-label="Open in Vuetify Bin"
-      title="Open in Vuetify Bin"
-      @click="openInBin"
-    >
-      <AppIcon icon="vuetify-bin" :size="16" />
-    </GnActionButton>
-
-    <GnActionButton
-      v-if="showSize"
-      :aria-label="`Code size: ${size}. Click to cycle`"
-      :title="`Code size: ${size}`"
-      @click="onSize"
-    >
-      <AppIcon :icon="`size-${size}`" :size="16" />
-    </GnActionButton>
-
-    <GnActionButton
-      v-if="showWrap"
-      :aria-label="wrap ? 'Disable line wrap' : 'Enable line wrap'"
-      :title="wrap ? 'Disable line wrap' : 'Enable line wrap'"
-      @click="wrap = !wrap"
-    >
-      <AppIcon :icon="wrap ? 'nowrap' : 'wrap'" :size="16" />
-    </GnActionButton>
-
-    <GnActionButton
-      v-if="showCopy"
-      :aria-label="!clipboard.copied.value ? 'Copy code' : 'Copied'"
-      :title="!clipboard.copied.value ? 'Copy code' : 'Copied'"
-      @click="copyCode"
-    >
-      <AppIcon :icon="!clipboard.copied.value ? 'copy' : 'success'" :size="16" />
-    </GnActionButton>
+    <Tooltip.Root v-if="playground" :close-delay="100" :open-delay="500">
+      <Tooltip.Activator renderless>
+        <template #default="{ attrs: tooltipAttrs }">
+          <GnActionButton
+            v-bind="tooltipAttrs"
+            aria-label="Open in Vuetify Play"
+            @click="openInPlayground"
+          >
+            <AppIcon icon="vuetify-play" :size="16" />
+          </GnActionButton>
+        </template>
+      </Tooltip.Activator>
+
+      <Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
+        Open in Vuetify Play
+      </Tooltip.Content>
+    </Tooltip.Root>
+
+    <Tooltip.Root v-if="bin" :close-delay="100" :open-delay="500">
+      <Tooltip.Activator renderless>
+        <template #default="{ attrs: tooltipAttrs }">
+          <GnActionButton
+            v-bind="tooltipAttrs"
+            aria-label="Open in Vuetify Bin"
+            @click="openInBin"
+          >
+            <AppIcon icon="vuetify-bin" :size="16" />
+          </GnActionButton>
+        </template>
+      </Tooltip.Activator>
+
+      <Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
+        Open in Vuetify Bin
+      </Tooltip.Content>
+    </Tooltip.Root>
+
+    <Tooltip.Root v-if="showSize" :close-delay="100" :open-delay="500">
+      <Tooltip.Activator renderless>
+        <template #default="{ attrs: tooltipAttrs }">
+          <GnActionButton
+            v-bind="tooltipAttrs"
+            :aria-label="`Code size: ${size}. Click to cycle`"
+            @click="onSize"
+          >
+            <AppIcon :icon="`size-${size}`" :size="16" />
+          </GnActionButton>
+        </template>
+      </Tooltip.Activator>
+
+      <Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
+        Code size: {{ size }}
+      </Tooltip.Content>
+    </Tooltip.Root>
+
+    <Tooltip.Root v-if="showWrap" :close-delay="100" :open-delay="500">
+      <Tooltip.Activator renderless>
+        <template #default="{ attrs: tooltipAttrs }">
+          <GnActionButton
+            v-bind="tooltipAttrs"
+            :aria-label="wrap ? 'Disable line wrap' : 'Enable line wrap'"
+            @click="wrap = !wrap"
+          >
+            <AppIcon :icon="wrap ? 'nowrap' : 'wrap'" :size="16" />
+          </GnActionButton>
+        </template>
+      </Tooltip.Activator>
+
+      <Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
+        {{ wrap ? 'Disable line wrap' : 'Enable line wrap' }}
+      </Tooltip.Content>
+    </Tooltip.Root>
+
+    <Tooltip.Root v-if="showCopy" :close-delay="100" :open-delay="500">
+      <Tooltip.Activator renderless>
+        <template #default="{ attrs: tooltipAttrs }">
+          <GnActionButton
+            v-bind="tooltipAttrs"
+            :aria-label="!clipboard.copied.value ? 'Copy code' : 'Copied'"
+            @click="copyCode"
+          >
+            <AppIcon :icon="!clipboard.copied.value ? 'copy' : 'success'" :size="16" />
+          </GnActionButton>
+        </template>
+      </Tooltip.Activator>
+
+      <Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
+        {{ !clipboard.copied.value ? 'Copy code' : 'Copied!' }}
+      </Tooltip.Content>
+    </Tooltip.Root>
   </div>
 </template>
diff --git a/apps/docs/src/components/docs/DocsExampleCodePane.vue b/apps/docs/src/components/docs/DocsExampleCodePane.vue
index 23b53e3ad4..f374dc48c7 100644
--- a/apps/docs/src/components/docs/DocsExampleCodePane.vue
+++ b/apps/docs/src/components/docs/DocsExampleCodePane.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   // Framework
-  import { useIntersectionObserver, useLogger } from '@vuetify/v0'
+  import { Tooltip, useIntersectionObserver, useLogger } from '@vuetify/v0'
 
   // Composables
   import { useCodeHighlighter } from '@/composables/useCodeHighlighter'
@@ -115,16 +115,20 @@
         :title="title || fileName"
       />
 
-      <button
-        v-if="shouldPeek && expanded"
-        aria-label="Collapse code"
-        class="inline-flex items-center justify-center size-7 text-on-primary bg-primary rounded cursor-pointer transition-200 hover:bg-primary/85"
-        title="Collapse code"
-        type="button"
-        @click="expanded = false"
-      >
-        <AppIcon icon="fullscreen-exit" :size="16" />
-      </button>
+      <Tooltip.Root v-if="shouldPeek && expanded" :close-delay="100" :open-delay="500">
+        <Tooltip.Activator
+          aria-label="Collapse code"
+          class="inline-flex items-center justify-center size-7 text-on-primary bg-primary rounded cursor-pointer transition-200 hover:bg-primary/85"
+          type="button"
+          @click="expanded = false"
+        >
+          <AppIcon icon="fullscreen-exit" :size="16" />
+        </Tooltip.Activator>
+
+        <Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
+          Collapse code
+        </Tooltip.Content>
+      </Tooltip.Root>
     </div>
 
     <div
diff --git a/apps/docs/src/components/home/HomeInstallCommand.vue b/apps/docs/src/components/home/HomeInstallCommand.vue
index 009594343f..bd67455d91 100644
--- a/apps/docs/src/components/home/HomeInstallCommand.vue
+++ b/apps/docs/src/components/home/HomeInstallCommand.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   // Framework
-  import { Popover } from '@vuetify/v0'
+  import { Popover, Tooltip } from '@vuetify/v0'
 
   // Composables
   import { useClipboard } from '@/composables/useClipboard'
@@ -47,14 +47,24 @@
     :title="command"
   >
     <Popover.Root v-model="isOpen">
-      <Popover.Activator
-        aria-label="Change package manager"
-        class="inline-flex items-center gap-1 pl-2.5 pr-2 py-1 rounded-full text-primary hover:bg-surface-tint transition-colors cursor-pointer"
-        title="Change package manager"
-      >
-        <span>{{ settings.packageManager.value }}</span>
-        <AppChevron :open="isOpen" :size="12" vertical />
-      </Popover.Activator>
+      <Tooltip.Root :close-delay="100" :open-delay="500">
+        <Tooltip.Activator renderless>
+          <template #default="{ attrs: tooltipAttrs }">
+            <Popover.Activator
+              v-bind="tooltipAttrs"
+              aria-label="Change package manager"
+              class="inline-flex items-center gap-1 pl-2.5 pr-2 py-1 rounded-full text-primary hover:bg-surface-tint transition-colors cursor-pointer"
+            >
+              <span>{{ settings.packageManager.value }}</span>
+              <AppChevron :open="isOpen" :size="12" vertical />
+            </Popover.Activator>
+          </template>
+        </Tooltip.Activator>
+
+        <Tooltip.Content class="px-2.5 py-1.5 rounded border border-divider text-xs bg-surface text-on-surface shadow-lg">
+          Change package manager
+        </Tooltip.Content>
+      </Tooltip.Root>
 
       <Popover.Content
         class="p-1.5 rounded-lg bg-surface border border-divider shadow-lg min-w-[140px] !mt-[9px]"