feat(kit): improve tooltip

Author: antfu

packages/core/src/client/webcomponents/.generated/css.ts

@@ -3,6 +3,7 @@ import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { DevToolsDockState } from './DockProps'
 import Dock from './Dock.vue'
 import DockPanel from './DockPanel.vue'
+import FloatingTooltip from './FloatingTooltip.vue'
 
 defineProps<{
   state: DevToolsDockState
@@ -24,4 +25,5 @@ defineProps<{
       />
     </template>
   </Dock>
+  <FloatingTooltip />
 </template>

packages/core/src/client/webcomponents/components/DockEmbedded.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import { toRefs } from 'vue'
-import DockIcon from './DockIcon.vue'
+import DockEntry from './DockEntry.vue'
 
 const props = defineProps<{
   selected?: DevToolsDockEntry
@@ -27,25 +27,14 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
   <div
     class="vite-devtools-dock-entries flex items-center w-full h-full justify-center transition-opacity duration-300"
   >
-    <div
+    <DockEntry
       v-for="dock of entries"
       :key="dock.id"
-      class="relative group vite-devtools-dock-entry"
-    >
-      <button
-        :title="dock.title"
-        :class="[
-          isVertical ? 'rotate-270' : '',
-          selected ? selected.id !== dock.id ? 'op50 saturate-0' : 'scale-120 text-purple' : '',
-        ]"
-        class="flex items-center justify-center p1.5 rounded-xl hover:bg-[#8881] hover:scale-120 transition-all duration-300 relative"
-        @click="toggleDockEntry(dock)"
-      >
-        <DockIcon :icon="dock.icon" :title="dock.title" class="w-5 h-5 select-none" />
-      </button>
-      <div class="vite-devtools-dock-label text-xs group-hover:opacity-100 opacity-0 transition-opacity duration-300 w-max bg-glass border border-base z-10 rounded px2 absolute p1">
-        {{ dock.title }}
-      </div>
-    </div>
+      :dock
+      :is-selected="selected?.id === dock.id"
+      :is-dimmed="selected && (selected.id !== dock.id)"
+      :is-vertical="isVertical"
+      @click="toggleDockEntry(dock)"
+    />
   </div>
 </template>

packages/core/src/client/webcomponents/components/DockEntries.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
+import { useEventListener } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+import { setFloatingTooltip } from '../state/floating-tooltip'
+import DockIcon from './DockIcon.vue'
+
+const props = defineProps<{
+  dock: DevToolsDockEntry
+  isSelected?: boolean
+  isDimmed?: boolean
+  isVertical?: boolean
+}>()
+
+const button = useTemplateRef<HTMLButtonElement>('button')
+
+function updatePos() {
+  const rect = button.value?.getBoundingClientRect()
+  if (rect) {
+    setFloatingTooltip({
+      text: props.dock.title,
+      width: rect.width,
+      height: rect.height,
+      left: rect.left,
+      top: rect.top,
+    })
+  }
+}
+
+function showTitle() {
+  updatePos()
+}
+
+function clearTitle() {
+  setFloatingTooltip(null)
+}
+
+useEventListener('pointerdown', () => {
+  setFloatingTooltip(null)
+})
+</script>
+
+<template>
+  <div
+    :key="dock.id"
+    class="relative group vite-devtools-dock-entry"
+    @pointerenter="showTitle"
+    @pointerleave="clearTitle"
+  >
+    <button
+      ref="button"
+      :title="dock.title"
+      :class="[
+        isVertical ? 'rotate-270' : '',
+        isDimmed ? 'op50 saturate-0' : '',
+        isSelected ? 'scale-120 text-purple' : '',
+      ]"
+      class="flex items-center justify-center p1.5 rounded-xl hover:bg-[#8881] hover:scale-120 transition-all duration-300 relative"
+    >
+      <DockIcon :icon="dock.icon" :title="dock.title" class="w-5 h-5 select-none" />
+    </button>
+  </div>
+</template>

packages/core/src/client/webcomponents/components/DockEntry.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { FloatingTooltip } from '../state/floating-tooltip'
+import { computed, ref, watchEffect } from 'vue'
+import { useFloatingTooltip } from '../state/floating-tooltip'
+
+const DETECT_MARGIN = 100
+const GAP = 10
+
+const current = useFloatingTooltip()
+const box = ref<FloatingTooltip>({
+  text: '',
+  width: 0,
+  height: 0,
+  left: 0,
+  top: 0,
+})
+
+// guess alignment of the tooltip based on viewport position
+const align = computed<'bottom' | 'left' | 'right' | 'top'>(() => {
+  const vw = window.innerWidth
+  const vh = window.innerHeight
+  if (box.value.left < DETECT_MARGIN)
+    return 'right'
+  if (box.value.left + box.value.width > vw - DETECT_MARGIN)
+    return 'left'
+  if (box.value.top < DETECT_MARGIN)
+    return 'bottom'
+  if (box.value.top + box.value.height > vh - DETECT_MARGIN)
+    return 'top'
+  return 'bottom'
+})
+
+const style = computed(() => {
+  switch (align.value) {
+    case 'bottom': {
+      return {
+        left: `${box.value.left + box.value.width / 2}px`,
+        top: `${box.value.top + box.value.height + GAP}px`,
+        transform: 'translateX(-50%)',
+      }
+    }
+    case 'top': {
+      return {
+        left: `${box.value.left + box.value.width / 2}px`,
+        bottom: `${window.innerHeight - box.value.top + GAP}px`,
+        transform: 'translateX(-50%)',
+      }
+    }
+    case 'left': {
+      return {
+        right: `${window.innerWidth - box.value.left + GAP}px`,
+        top: `${box.value.top + box.value.height / 2}px`,
+        transform: 'translateY(-50%)',
+      }
+    }
+    case 'right': {
+      return {
+        left: `${box.value.left + box.value.width + GAP}px`,
+        top: `${box.value.top + box.value.height / 2}px`,
+        transform: 'translateY(-50%)',
+      }
+    }
+    default: {
+      throw new Error('Unreachable')
+    }
+  }
+})
+
+watchEffect(() => {
+  if (current.value) {
+    box.value = { ...current.value }
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="box.text"
+    class="vite-devtools-floating-title z-[2147483645] text-xs transition-all duration-300 w-max bg-glass border border-base rounded px2 fixed p1"
+    :class="current ? 'op100' : 'op0 pointer-events-none'"
+    :style="style"
+  >
+    {{ box.text }}
+  </div>
+</template>

packages/core/src/client/webcomponents/components/FloatingTooltip.vue

@@ -0,0 +1,19 @@
+import { shallowRef } from 'vue'
+
+export interface FloatingTooltip {
+  left: number
+  top: number
+  width: number
+  height: number
+  text: string
+}
+
+const state = shallowRef<FloatingTooltip | null>(null)
+
+export function setFloatingTooltip(info: FloatingTooltip | null) {
+  state.value = info
+}
+
+export function useFloatingTooltip() {
+  return state
+}

packages/core/src/client/webcomponents/state/floating-tooltip.ts

@@ -12,14 +12,14 @@
   --uno: absolute w-[14px] h-[14px] -m-[6px] rounded-md;
 }
 .vite-devtools-resize-handle {
-  --uno: z-[2147483645];
+  --uno: z-[2147483644];
 }
 .vite-devtools-resize-handle:hover {
   --uno: bg-gray-400:10;
 }
 
 #vite-devtools-anchor {
-  --uno: w-0 z-[2147483645] fixed origin-center font-sans text-[15px] box-border;
+  --uno: w-0 z-[2147483644] fixed origin-center font-sans text-[15px] box-border;
   transform: translate(-50%, -50%) rotate(0);
 }
 
@@ -63,12 +63,3 @@
     --uno: hidden;
   }
 }
-
-.vite-devtools-dock-label {
-  --uno: translate-x--1/2 bottom--7 left-1/2;
-}
-
-.vite-devtools-vertical .vite-devtools-dock-label {
-  --uno: rotate-270 bottom--10;
-}
-