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>` } : {},
       },
     }
   }