From 835683413cb5c4953af4517f8a8d65a9d73e234b Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Thu, 5 Feb 2026 11:32:33 +0000
Subject: [PATCH] feat: tooltips for field values

---
 .../src/components/state/StateFieldViewer.vue | 21 ++++++++++++++++++-
 .../src/core/component/state/custom.ts        |  4 ++--
 .../src/core/component/state/process.ts       |  4 ++--
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/applet/src/components/state/StateFieldViewer.vue b/packages/applet/src/components/state/StateFieldViewer.vue
index a26c03a5c..8f8f48e3d 100644
--- a/packages/applet/src/components/state/StateFieldViewer.vue
+++ b/packages/applet/src/components/state/StateFieldViewer.vue
@@ -80,6 +80,25 @@ const normalizedDisplayedValue = computed(() => {
   }
 })
 
+const valueTooltip = computed(() => {
+  const tooltip = {
+    content: '',
+    disabled: true,
+    html: true,
+  }
+
+  if (type.value === 'custom') {
+    const tooltipText = (props.data.value as InspectorCustomState)?._custom?.tooltipText
+
+    if (tooltipText) {
+      tooltip.content = tooltipText
+      tooltip.disabled = false
+    }
+  }
+
+  return tooltip
+})
+
 // normalized display children
 const normalizedDisplayedChildren = computed(() => {
   const { value, inherit, customType } = raw.value
@@ -205,7 +224,7 @@ async function submitDrafting() {
       <span mx1>:</span>
       <StateFieldInputEditor v-if="editing" v-model="editingText" class="mr-1" :custom-type="raw.customType" @cancel="toggleEditing" @submit="submit" />
       <span :class="stateFormatClass" class="flex whitespace-nowrap dark:text-#bdc6cf">
-        <span class="flex" v-html="normalizedDisplayedValue" />
+        <span v-tooltip="valueTooltip" class="flex" v-html="normalizedDisplayedValue" />
       </span>
       <StateFieldEditor
         :hovering="isHovering" :disable-edit="state.disableEdit || editing"
diff --git a/packages/devtools-kit/src/core/component/state/custom.ts b/packages/devtools-kit/src/core/component/state/custom.ts
index e7a76b187..fff0ff632 100644
--- a/packages/devtools-kit/src/core/component/state/custom.ts
+++ b/packages/devtools-kit/src/core/component/state/custom.ts
@@ -23,7 +23,7 @@ export function getFunctionDetails(func: Function) {
     _custom: {
       type: 'function' satisfies customTypeEnums,
       displayText: `<span style="opacity:.8;margin-right:5px;">function</span> <span style="white-space:nowrap;">${escape(name)}${args}</span>`,
-      tooltipText: string.trim() ? `<pre>${string}</pre>` : null,
+      tooltipText: string.trim() ? `<pre>${escape(string)}</pre>` : null,
     },
   }
 }
@@ -249,7 +249,7 @@ export function getObjectDetails(object: Record<string, any>) {
         type: stateTypeName?.toLowerCase(),
         stateTypeName,
         value,
-        ...raw ? { tooltipText: `<span class="font-mono">${raw}</span>` } : {},
+        ...raw ? { tooltipText: `<pre>${escape(raw)}</pre>` } : {},
       },
     }
   }
diff --git a/packages/devtools-kit/src/core/component/state/process.ts b/packages/devtools-kit/src/core/component/state/process.ts
index eb38e2474..ac15c1bdf 100644
--- a/packages/devtools-kit/src/core/component/state/process.ts
+++ b/packages/devtools-kit/src/core/component/state/process.ts
@@ -3,7 +3,7 @@ import type { InspectorState } from '../types'
 import { camelize } from '@vue/devtools-shared'
 import { ensurePropertyExists, returnError } from '../utils'
 import { vueBuiltins } from './constants'
-import { getPropType, getSetupStateType, toRaw } from './util'
+import { escape, getPropType, getSetupStateType, toRaw } from './util'
 
 function mergeOptions(
   to: any,
@@ -297,7 +297,7 @@ function processEventListeners(instance: VueAppInstance) {
             displayText: isDeclared ? '✅ Declared' : '⚠️ Not declared',
             key: isDeclared ? '✅ Declared' : '⚠️ Not declared',
             value: isDeclared ? '✅ Declared' : '⚠️ Not declared',
-            tooltipText: !isDeclared ? `The event <code>${eventName}</code> is not declared in the <code>emits</code> option. It will leak into the component's attributes (<code>$attrs</code>).` : null,
+            tooltipText: !isDeclared ? `The event <code>${escape(eventName)}</code> is not declared in the <code>emits</code> option. It will leak into the component's attributes (<code>$attrs</code>).` : null,
           },
         },
       })