refactor(ui): use app tooltips consistently

src/components/CodePanel.vue

@@ -10,6 +10,7 @@ import { useI18n, useSceneComputed } from '@open-pencil/vue'
 
 import { useEditorStore } from '@/app/editor/active-store'
 import AppTextButton from '@/components/ui/AppTextButton.vue'
+import Tip from '@/components/ui/Tip.vue'
 
 import type { JSXFormat } from '@open-pencil/core/design-jsx'
 
@@ -71,15 +72,18 @@ function copyReference() {
         </AppTextButton>
       </div>
       <div class="flex items-center gap-1">
-        <AppTextButton
-          test-id="code-panel-copy-ref"
-          :ui="{ base: 'flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] hover:bg-hover' }"
-          title="Copy JSX prop reference to clipboard"
-          @click="copyReference"
-        >
-          <icon-lucide-check v-if="copiedRef" class="size-3 text-[var(--color-success)]" />
-          <icon-lucide-book-open v-else class="size-3" />
-        </AppTextButton>
+        <Tip label="Copy JSX prop reference to clipboard">
+          <AppTextButton
+            test-id="code-panel-copy-ref"
+            :ui="{
+              base: 'flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] hover:bg-hover'
+            }"
+            @click="copyReference"
+          >
+            <icon-lucide-check v-if="copiedRef" class="size-3 text-[var(--color-success)]" />
+            <icon-lucide-book-open v-else class="size-3" />
+          </AppTextButton>
+        </Tip>
         <AppTextButton
           test-id="code-panel-copy"
           :ui="{ base: 'flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] hover:bg-hover' }"

src/components/FontSettings/FontSettingsPopover.vue

@@ -4,6 +4,7 @@ import { onMounted } from 'vue'
 
 import { isTauri } from '@/app/tauri/env'
 import { useFontSettings } from '@/components/FontSettings/use'
+import Tip from '@/components/ui/Tip.vue'
 import { useButtonUI } from '@/components/ui/button'
 import { usePopoverUI } from '@/components/ui/popover'
 
@@ -51,13 +52,11 @@ onMounted(() => {
 
 <template>
   <PopoverRoot @update:open="$event && refreshSummary()">
-    <PopoverTrigger
-      data-test-id="font-settings-trigger"
-      :class="trigger.base"
-      title="Font settings"
-    >
-      <icon-lucide-settings class="size-3.5" />
-    </PopoverTrigger>
+    <Tip label="Font settings">
+      <PopoverTrigger data-test-id="font-settings-trigger" :class="trigger.base">
+        <icon-lucide-settings class="size-3.5" />
+      </PopoverTrigger>
+    </Tip>
 
     <PopoverPortal>
       <PopoverContent

src/components/chat/ProviderSettings/ProviderSettings.vue

@@ -10,6 +10,7 @@ import MaxTokensSection from '@/components/chat/ProviderSettings/MaxTokensSectio
 import ProviderSelectField from '@/components/chat/ProviderSelect/ProviderSelectField.vue'
 import StockPhotoKeysSection from '@/components/chat/ProviderSettings/StockPhotoKeysSection.vue'
 import { provideProviderSettings } from '@/components/chat/ProviderSettings/context'
+import Tip from '@/components/ui/Tip.vue'
 import { usePopoverUI } from '@/components/ui/popover'
 
 const { dialogs } = useI18n()
@@ -29,13 +30,14 @@ function onInteractOutside(e: Event) {
 
 <template>
   <PopoverRoot @update:open="popoverOpen = $event">
-    <PopoverTrigger
-      data-test-id="provider-settings-trigger"
-      class="rounded p-0.5 text-muted hover:bg-hover hover:text-surface"
-      :title="popoverOpen ? undefined : dialogs.providerSettings"
-    >
-      <icon-lucide-settings class="size-3" />
-    </PopoverTrigger>
+    <Tip :label="dialogs.providerSettings" :disabled="popoverOpen">
+      <PopoverTrigger
+        data-test-id="provider-settings-trigger"
+        class="rounded p-0.5 text-muted hover:bg-hover hover:text-surface"
+      >
+        <icon-lucide-settings class="size-3" />
+      </PopoverTrigger>
+    </Tip>
 
     <PopoverPortal>
       <PopoverContent

src/components/properties/BooleanOperationsControl.vue

@@ -16,6 +16,7 @@ import IconSquaresIntersect from '~icons/lucide/squares-intersect'
 import { editorCommandMetadata, formatShortcut, useEditorCommands, useI18n } from '@open-pencil/vue'
 import type { EditorCommandId } from '@open-pencil/vue'
 
+import Tip from '@/components/ui/Tip.vue'
 import { menuItem, useMenuUI } from '@/components/ui/menu'
 
 const { getCommand, runCommand } = useEditorCommands()
@@ -35,16 +36,17 @@ const itemCls = menuItem({ justify: 'between' })
 
 <template>
   <DropdownMenuRoot>
-    <DropdownMenuTrigger as-child>
-      <button
-        data-test-id="boolean-operations-trigger"
-        class="flex h-7 items-center gap-1 rounded-md px-1.5 text-muted hover:bg-hover hover:text-surface data-[state=open]:bg-active data-[state=open]:text-surface"
-        :title="commands.booleanOperations"
-      >
-        <IconCombine class="size-4" />
-        <IconChevronDown class="size-3" />
-      </button>
-    </DropdownMenuTrigger>
+    <Tip :label="commands.booleanOperations">
+      <DropdownMenuTrigger as-child>
+        <button
+          data-test-id="boolean-operations-trigger"
+          class="flex h-7 items-center gap-1 rounded-md px-1.5 text-muted hover:bg-hover hover:text-surface data-[state=open]:bg-active data-[state=open]:text-surface"
+        >
+          <IconCombine class="size-4" />
+          <IconChevronDown class="size-3" />
+        </button>
+      </DropdownMenuTrigger>
+    </Tip>
     <DropdownMenuPortal>
       <DropdownMenuContent align="end" side="bottom" :side-offset="4" :class="menuCls.content">
         <DropdownMenuItem

src/components/properties/VariablePickerPopover.vue

@@ -14,6 +14,8 @@ import { computed, nextTick, ref, watch } from 'vue'
 
 import { vTestId } from '@open-pencil/vue'
 
+import Tip from '@/components/ui/Tip.vue'
+
 import type { Variable } from '@open-pencil/core/scene-graph'
 
 const searchTerm = defineModel<string>('searchTerm', { default: '' })
@@ -78,15 +80,16 @@ function submitCreate() {
 
 <template>
   <PopoverRoot v-model:open="open">
-    <PopoverTrigger
-      v-test-id="triggerTestId"
-      :aria-label="triggerLabel"
-      :title="triggerLabel"
-      class="shrink-0 cursor-pointer border-none bg-transparent p-0 text-muted hover:text-surface"
-      @pointerdown.prevent.stop
-    >
-      <icon-lucide-diamond-plus class="size-3.5" />
-    </PopoverTrigger>
+    <Tip :label="triggerLabel" :disabled="open">
+      <PopoverTrigger
+        v-test-id="triggerTestId"
+        :aria-label="triggerLabel"
+        class="shrink-0 cursor-pointer border-none bg-transparent p-0 text-muted hover:text-surface"
+        @pointerdown.prevent.stop
+      >
+        <icon-lucide-diamond-plus class="size-3.5" />
+      </PopoverTrigger>
+    </Tip>
     <PopoverPortal>
       <PopoverContent
         side="left"

src/views/EditorView.vue

@@ -26,6 +26,7 @@ import MobileHud from '@/components/MobileHud/MobileHud.vue'
 import PropertiesPanel from '@/components/PropertiesPanel.vue'
 import SafariBanner from '@/components/SafariBanner.vue'
 import TabBar from '@/components/TabBar.vue'
+import Tip from '@/components/ui/Tip.vue'
 import Toolbar from '@/components/Toolbar/Toolbar.vue'
 
 const route = useRoute()
@@ -192,14 +193,15 @@ onUnmounted(() => {
           <span data-test-id="editor-document-name" class="text-xs text-surface">{{
             store.state.documentName
           }}</span>
-          <button
-            data-test-id="editor-show-ui"
-            class="ml-1 flex size-6 cursor-pointer items-center justify-center rounded text-muted transition-colors hover:bg-hover hover:text-surface"
-            :title="`Show UI (${formatShortcut(appMenuShortcut('toggle-ui'))})`"
-            @click="store.state.showUI = true"
-          >
-            <icon-lucide-sidebar class="size-3.5" />
-          </button>
+          <Tip :label="`Show UI (${formatShortcut(appMenuShortcut('toggle-ui'))})`">
+            <button
+              data-test-id="editor-show-ui"
+              class="ml-1 flex size-6 cursor-pointer items-center justify-center rounded text-muted transition-colors hover:bg-hover hover:text-surface"
+              @click="store.state.showUI = true"
+            >
+              <icon-lucide-sidebar class="size-3.5" />
+            </button>
+          </Tip>
         </div>
       </div>
     </div>