From 3ea4a3706ba001db8fe156f7bb6329b82a590e97 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 18 Aug 2026 16:18:05 +0100
Subject: [PATCH 01/10] Improve hover tunnel

---
 resources/css/components/tooltips.css |  4 ++++
 resources/js/components/Tooltips.vue  | 12 +++++++++---
 resources/js/composables/tooltip.js   | 11 +++++++++--
 resources/js/directives/tooltip.js    |  6 +++++-
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/resources/css/components/tooltips.css b/resources/css/components/tooltips.css
index ec610e1bea8..7b14ea5d213 100644
--- a/resources/css/components/tooltips.css
+++ b/resources/css/components/tooltips.css
@@ -9,3 +9,7 @@
 .v-popper--theme-tooltip .v-popper__inner {
     padding: 5px 10px !important;
 }
+
+.v-popper--theme-tooltip:has(.tooltip-popper-interactive) {
+    pointer-events: auto;
+}
diff --git a/resources/js/components/Tooltips.vue b/resources/js/components/Tooltips.vue
index d1d2a963361..705adcc1cf1 100644
--- a/resources/js/components/Tooltips.vue
+++ b/resources/js/components/Tooltips.vue
@@ -4,7 +4,7 @@ import { Tooltip as VTooltip } from 'floating-vue';
 import DOMPurify from 'dompurify';
 import { useTooltip } from '@/composables/tooltip.js';
 
-const { isVisible, content, html, targetEl } = useTooltip();
+const { isVisible, content, html, targetEl, persist, hide } = useTooltip();
 
 const showTooltip = ref(false);
 const wrapperStyle = ref({});
@@ -66,8 +66,14 @@ watch([isVisible, targetEl, content], async ([visible, target]) => {
             >
                 <span :style="spanStyle" />
                 <template #popper>
-                    <div v-if="displayHtml" v-html="displayContent" />
-                    <template v-else>{{ displayContent }}</template>
+                    <div
+                        :class="{ 'tooltip-popper-interactive': displayHtml }"
+                        @mouseenter="displayHtml && persist()"
+                        @mouseleave="displayHtml && hide()"
+                    >
+                        <div v-if="displayHtml" v-html="displayContent" />
+                        <template v-else>{{ displayContent }}</template>
+                    </div>
                 </template>
             </VTooltip>
         </div>
diff --git a/resources/js/composables/tooltip.js b/resources/js/composables/tooltip.js
index 2b5c1778dab..9ed958afceb 100644
--- a/resources/js/composables/tooltip.js
+++ b/resources/js/composables/tooltip.js
@@ -23,11 +23,15 @@ function setContent(el, options) {
     }
 }
 
-function show(el, options) {
+function persist() {
     if (hideTimeout) {
         clearTimeout(hideTimeout);
         hideTimeout = null;
     }
+}
+
+function show(el, options) {
+    persist();
 
     if (showTimeout) {
         clearTimeout(showTimeout);
@@ -54,12 +58,14 @@ function hide() {
         showTimeout = null;
     }
 
+    persist();
+
     hideTimeout = setTimeout(() => {
         isVisible.value = false;
         targetEl.value = null;
         content.value = '';
         html.value = false;
-    }, 50);
+    }, html.value ? 200 : 50);
 }
 
 export function useTooltip() {
@@ -69,6 +75,7 @@ export function useTooltip() {
         html: readonly(html),
         targetEl: readonly(targetEl),
         show,
+        persist,
         hide,
     };
 }
diff --git a/resources/js/directives/tooltip.js b/resources/js/directives/tooltip.js
index 8ae42ce4e22..4ed97ea4e80 100644
--- a/resources/js/directives/tooltip.js
+++ b/resources/js/directives/tooltip.js
@@ -19,7 +19,11 @@ function handleMouseEnter(el, binding) {
     }
 }
 
-function handleMouseLeave() {
+function handleMouseLeave(event) {
+    if (event.relatedTarget?.closest?.('.v-popper__popper')) {
+        return;
+    }
+
     hide();
 }
 

From d3cc403a20b14e753c3c442b247a9ac0f5e44776 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 18 Aug 2026 16:38:05 +0100
Subject: [PATCH 02/10] Copy the tooltip on click

---
 resources/js/components/Tooltips.vue         | 24 ++++++++++++++++----
 resources/js/components/ui/Publish/Field.vue |  2 +-
 resources/js/composables/tooltip.js          |  8 ++++++-
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/Tooltips.vue b/resources/js/components/Tooltips.vue
index 705adcc1cf1..bd98ff8e73e 100644
--- a/resources/js/components/Tooltips.vue
+++ b/resources/js/components/Tooltips.vue
@@ -1,10 +1,12 @@
 <script setup>
-import { ref, watch, nextTick } from 'vue';
+import { ref, watch, nextTick, computed } from 'vue';
 import { Tooltip as VTooltip } from 'floating-vue';
 import DOMPurify from 'dompurify';
 import { useTooltip } from '@/composables/tooltip.js';
+import useCopy from '@/composables/copy';
 
-const { isVisible, content, html, targetEl, persist, hide } = useTooltip();
+const { isVisible, content, html, copyable, targetEl, persist, hide } = useTooltip();
+const { copySupported, copy } = useCopy();
 
 const showTooltip = ref(false);
 const wrapperStyle = ref({});
@@ -12,6 +14,8 @@ const spanStyle = ref({});
 const tooltipKey = ref(0);
 const displayContent = ref('');
 const displayHtml = ref(false);
+const displayCopyable = ref(false);
+const isInteractive = computed(() => displayHtml.value || displayCopyable.value);
 
 function updatePosition() {
     if (!targetEl.value) {
@@ -42,6 +46,7 @@ watch([isVisible, targetEl, content], async ([visible, target]) => {
     if (visible && target) {
         // Update content and position (handles both initial show and target changes)
         displayHtml.value = html.value;
+        displayCopyable.value = copyable.value;
         displayContent.value = displayHtml.value ? DOMPurify.sanitize(content.value ?? '') : content.value;
         updatePosition();
         tooltipKey.value++;
@@ -67,11 +72,20 @@ watch([isVisible, targetEl, content], async ([visible, target]) => {
                 <span :style="spanStyle" />
                 <template #popper>
                     <div
-                        :class="{ 'tooltip-popper-interactive': displayHtml }"
-                        @mouseenter="displayHtml && persist()"
-                        @mouseleave="displayHtml && hide()"
+                        :class="{ 'tooltip-popper-interactive': isInteractive }"
+                        @mouseenter="isInteractive && persist()"
+                        @mouseleave="isInteractive && hide()"
                     >
                         <div v-if="displayHtml" v-html="displayContent" />
+                        <span
+                            v-else-if="displayCopyable && copySupported"
+                            class="cursor-pointer"
+                            role="button"
+                            tabindex="0"
+                            :aria-label="__('Copy')"
+                            @click.stop="copy(displayContent)"
+                            @keydown.enter.prevent="copy(displayContent)"
+                        >{{ displayContent }}</span>
                         <template v-else>{{ displayContent }}</template>
                     </div>
                 </template>
diff --git a/resources/js/components/ui/Publish/Field.vue b/resources/js/components/ui/Publish/Field.vue
index aa918a8d86b..1849c955d14 100644
--- a/resources/js/components/ui/Publish/Field.vue
+++ b/resources/js/components/ui/Publish/Field.vue
@@ -272,7 +272,7 @@ const fieldtypeComponentEvents = computed(() => ({
                         />
                     </Transition>
                     <template v-if="shouldShowLabelText">
-                        <span v-tooltip="config.handle">
+                        <span v-tooltip="{ content: config.handle, copyable: true }">
                             {{ __(config.display) }}
                         </span>
                     </template>
diff --git a/resources/js/composables/tooltip.js b/resources/js/composables/tooltip.js
index 9ed958afceb..f2a94e4fc51 100644
--- a/resources/js/composables/tooltip.js
+++ b/resources/js/composables/tooltip.js
@@ -3,6 +3,7 @@ import { ref, shallowRef, readonly } from 'vue';
 const isVisible = ref(false);
 const content = ref('');
 const html = ref(false);
+const copyable = ref(false);
 const targetEl = shallowRef(null);
 
 let hideTimeout = null;
@@ -14,12 +15,15 @@ function setContent(el, options) {
     if (typeof options === 'string') {
         content.value = options;
         html.value = false;
+        copyable.value = false;
     } else if (options && typeof options === 'object') {
         content.value = options.content || '';
         html.value = options.html || false;
+        copyable.value = options.copyable || false;
     } else {
         content.value = '';
         html.value = false;
+        copyable.value = false;
     }
 }
 
@@ -65,7 +69,8 @@ function hide() {
         targetEl.value = null;
         content.value = '';
         html.value = false;
-    }, html.value ? 200 : 50);
+        copyable.value = false;
+    }, html.value || copyable.value ? 200 : 50);
 }
 
 export function useTooltip() {
@@ -73,6 +78,7 @@ export function useTooltip() {
         isVisible: readonly(isVisible),
         content: readonly(content),
         html: readonly(html),
+        copyable: readonly(copyable),
         targetEl: readonly(targetEl),
         show,
         persist,

From cf9d9257a02a7b0ef04a167ded43b92e6a2c3e27 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 18 Aug 2026 17:02:24 +0100
Subject: [PATCH 03/10] Make it great (don't fall out the sky when going
 between the field and tooltip)

---
 resources/css/components/tooltips.css |   4 +-
 resources/js/components/Tooltips.vue  |   9 +-
 resources/js/composables/tooltip.js   | 138 ++++++++++++++++++++++----
 resources/js/directives/tooltip.js    |  19 ++--
 4 files changed, 132 insertions(+), 38 deletions(-)

diff --git a/resources/css/components/tooltips.css b/resources/css/components/tooltips.css
index 7b14ea5d213..092af38d04a 100644
--- a/resources/css/components/tooltips.css
+++ b/resources/css/components/tooltips.css
@@ -10,6 +10,8 @@
     padding: 5px 10px !important;
 }
 
-.v-popper--theme-tooltip:has(.tooltip-popper-interactive) {
+/* Copyable and HTML tooltips can be hovered and clicked. */
+.v-popper--theme-tooltip:has(.tooltip-popper-interactive),
+.v-popper--theme-tooltip:has(.tooltip-popper-interactive) .v-popper__wrapper {
     pointer-events: auto;
 }
diff --git a/resources/js/components/Tooltips.vue b/resources/js/components/Tooltips.vue
index bd98ff8e73e..7d4e053263f 100644
--- a/resources/js/components/Tooltips.vue
+++ b/resources/js/components/Tooltips.vue
@@ -5,7 +5,7 @@ import DOMPurify from 'dompurify';
 import { useTooltip } from '@/composables/tooltip.js';
 import useCopy from '@/composables/copy';
 
-const { isVisible, content, html, copyable, targetEl, persist, hide } = useTooltip();
+const { isVisible, content, html, copyable, targetEl, registerContentEl } = useTooltip();
 const { copySupported, copy } = useCopy();
 
 const showTooltip = ref(false);
@@ -67,19 +67,18 @@ watch([isVisible, targetEl, content], async ([visible, target]) => {
                 :shown="showTooltip"
                 :triggers="[]"
                 placement="top"
-                :distance="10"
+                :distance="6"
             >
                 <span :style="spanStyle" />
                 <template #popper>
                     <div
+                        :ref="registerContentEl"
                         :class="{ 'tooltip-popper-interactive': isInteractive }"
-                        @mouseenter="isInteractive && persist()"
-                        @mouseleave="isInteractive && hide()"
                     >
                         <div v-if="displayHtml" v-html="displayContent" />
                         <span
                             v-else-if="displayCopyable && copySupported"
-                            class="cursor-pointer"
+                            class="cursor-pointer hover:underline"
                             role="button"
                             tabindex="0"
                             :aria-label="__('Copy')"
diff --git a/resources/js/composables/tooltip.js b/resources/js/composables/tooltip.js
index f2a94e4fc51..090f25b3d58 100644
--- a/resources/js/composables/tooltip.js
+++ b/resources/js/composables/tooltip.js
@@ -5,9 +5,90 @@ const content = ref('');
 const html = ref(false);
 const copyable = ref(false);
 const targetEl = shallowRef(null);
+const contentEl = shallowRef(null);
 
-let hideTimeout = null;
 let showTimeout = null;
+let pendingEl = null;
+let tracking = false;
+let pointer = null;
+
+/* Slack around each rect, for subpixel rounding and the pointer sitting on a border. */
+const EDGE = 4;
+
+function isInteractive() {
+    return html.value || copyable.value;
+}
+
+function popperRect() {
+    const el = contentEl.value;
+    if (!el?.isConnected) return null;
+
+    return (el.closest('.v-popper__popper') ?? el).getBoundingClientRect();
+}
+
+function triggerRect() {
+    const el = targetEl.value;
+
+    return el?.isConnected ? el.getBoundingClientRect() : null;
+}
+
+function contains(rect, x, y, pad = EDGE) {
+    return (
+        !!rect &&
+        x >= rect.left - pad &&
+        x <= rect.right + pad &&
+        y >= rect.top - pad &&
+        y <= rect.bottom + pad
+    );
+}
+
+/* The arrow and offset leave a gap between the trigger and the popper. Bridge it with a
+   rect covering only that gap, so the pointer can travel between the two. */
+function gapRect(trigger, popper) {
+    const left = Math.min(trigger.left, popper.left);
+    const right = Math.max(trigger.right, popper.right);
+
+    if (popper.bottom <= trigger.top) return { left, right, top: popper.bottom, bottom: trigger.top };
+    if (popper.top >= trigger.bottom) return { left, right, top: trigger.bottom, bottom: popper.top };
+
+    return null;
+}
+
+function isPointerInside(x, y) {
+    const trigger = triggerRect();
+    const popper = popperRect();
+
+    if (contains(trigger, x, y) || contains(popper, x, y)) return true;
+
+    return !!trigger && !!popper && contains(gapRect(trigger, popper), x, y, 0);
+}
+
+function onPointerMove(event) {
+    pointer = { x: event.clientX, y: event.clientY };
+
+    if (!isPointerInside(pointer.x, pointer.y)) dismiss();
+}
+
+function onPointerGone() {
+    dismiss();
+}
+
+function startTracking() {
+    if (tracking) return;
+    tracking = true;
+    document.addEventListener('mousemove', onPointerMove, true);
+    document.addEventListener('mouseleave', onPointerGone);
+    window.addEventListener('blur', onPointerGone);
+}
+
+function stopTracking() {
+    if (!tracking) return;
+    tracking = false;
+    pointer = null;
+    document.removeEventListener('mousemove', onPointerMove, true);
+    document.removeEventListener('mouseleave', onPointerGone);
+    window.removeEventListener('blur', onPointerGone);
+}
 
 function setContent(el, options) {
     targetEl.value = el;
@@ -25,18 +106,28 @@ function setContent(el, options) {
         html.value = false;
         copyable.value = false;
     }
+
+    isInteractive() ? startTracking() : stopTracking();
 }
 
-function persist() {
-    if (hideTimeout) {
-        clearTimeout(hideTimeout);
-        hideTimeout = null;
+function dismiss() {
+    stopTracking();
+
+    if (showTimeout) {
+        clearTimeout(showTimeout);
+        showTimeout = null;
     }
+
+    pendingEl = null;
+
+    isVisible.value = false;
+    targetEl.value = null;
+    content.value = '';
+    html.value = false;
+    copyable.value = false;
 }
 
 function show(el, options) {
-    persist();
-
     if (showTimeout) {
         clearTimeout(showTimeout);
     }
@@ -47,7 +138,10 @@ function show(el, options) {
         return;
     }
 
+    pendingEl = el;
+
     showTimeout = setTimeout(() => {
+        pendingEl = null;
         setContent(el, options);
 
         if (content.value) {
@@ -57,20 +151,24 @@ function show(el, options) {
 }
 
 function hide() {
-    if (showTimeout) {
-        clearTimeout(showTimeout);
-        showTimeout = null;
+    /* An interactive tooltip stays open when the pointer leaves the trigger heading for
+       the popper. The pointer tracker dismisses it once it's outside both and the gap. */
+    if (isVisible.value && isInteractive()) {
+        if (pointer && !isPointerInside(pointer.x, pointer.y)) dismiss();
+        return;
     }
 
-    persist();
+    dismiss();
+}
 
-    hideTimeout = setTimeout(() => {
-        isVisible.value = false;
-        targetEl.value = null;
-        content.value = '';
-        html.value = false;
-        copyable.value = false;
-    }, html.value || copyable.value ? 200 : 50);
+/* Only tear down when the element owning the tooltip goes away, so unrelated elements
+   unmounting can't close a tooltip the pointer is currently using. */
+function dismissFor(el) {
+    if (targetEl.value === el || pendingEl === el) dismiss();
+}
+
+function registerContentEl(el) {
+    contentEl.value = el ?? null;
 }
 
 export function useTooltip() {
@@ -81,7 +179,9 @@ export function useTooltip() {
         copyable: readonly(copyable),
         targetEl: readonly(targetEl),
         show,
-        persist,
         hide,
+        dismiss,
+        dismissFor,
+        registerContentEl,
     };
 }
diff --git a/resources/js/directives/tooltip.js b/resources/js/directives/tooltip.js
index 4ed97ea4e80..a61fad0c6ab 100644
--- a/resources/js/directives/tooltip.js
+++ b/resources/js/directives/tooltip.js
@@ -1,6 +1,6 @@
 import { useTooltip } from '@/composables/tooltip.js';
 
-const { show, hide } = useTooltip();
+const { show, hide, dismissFor } = useTooltip();
 
 function getOptions(binding) {
     const value = binding.value;
@@ -19,24 +19,17 @@ function handleMouseEnter(el, binding) {
     }
 }
 
-function handleMouseLeave(event) {
-    if (event.relatedTarget?.closest?.('.v-popper__popper')) {
-        return;
-    }
-
-    hide();
-}
-
 export default {
     mounted(el, binding) {
         el._tooltipBinding = binding;
         el._tooltipMouseEnter = () => handleMouseEnter(el, el._tooltipBinding);
-        el._tooltipMouseLeave = handleMouseLeave;
+        el._tooltipMouseLeave = hide;
+        el._tooltipBlur = () => dismissFor(el);
 
         el.addEventListener('mouseenter', el._tooltipMouseEnter);
         el.addEventListener('mouseleave', el._tooltipMouseLeave);
         el.addEventListener('focus', el._tooltipMouseEnter);
-        el.addEventListener('blur', el._tooltipMouseLeave);
+        el.addEventListener('blur', el._tooltipBlur);
     },
 
     updated(el, binding) {
@@ -47,7 +40,7 @@ export default {
         el.removeEventListener('mouseenter', el._tooltipMouseEnter);
         el.removeEventListener('mouseleave', el._tooltipMouseLeave);
         el.removeEventListener('focus', el._tooltipMouseEnter);
-        el.removeEventListener('blur', el._tooltipMouseLeave);
-        hide();
+        el.removeEventListener('blur', el._tooltipBlur);
+        dismissFor(el);
     },
 };

From 4fc310cc0041d2473453ca0312faf3b793edac60 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 18 Aug 2026 17:05:56 +0100
Subject: [PATCH 04/10] Tidy up

---
 resources/css/components/tooltips.css |  1 -
 resources/js/components/Tooltips.vue  |  2 +-
 resources/js/composables/tooltip.js   | 20 ++++----------------
 3 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/resources/css/components/tooltips.css b/resources/css/components/tooltips.css
index 092af38d04a..9510802e4bd 100644
--- a/resources/css/components/tooltips.css
+++ b/resources/css/components/tooltips.css
@@ -10,7 +10,6 @@
     padding: 5px 10px !important;
 }
 
-/* Copyable and HTML tooltips can be hovered and clicked. */
 .v-popper--theme-tooltip:has(.tooltip-popper-interactive),
 .v-popper--theme-tooltip:has(.tooltip-popper-interactive) .v-popper__wrapper {
     pointer-events: auto;
diff --git a/resources/js/components/Tooltips.vue b/resources/js/components/Tooltips.vue
index 7d4e053263f..37a0ba659d8 100644
--- a/resources/js/components/Tooltips.vue
+++ b/resources/js/components/Tooltips.vue
@@ -67,7 +67,7 @@ watch([isVisible, targetEl, content], async ([visible, target]) => {
                 :shown="showTooltip"
                 :triggers="[]"
                 placement="top"
-                :distance="6"
+                :distance="10"
             >
                 <span :style="spanStyle" />
                 <template #popper>
diff --git a/resources/js/composables/tooltip.js b/resources/js/composables/tooltip.js
index 090f25b3d58..9eb2e46ee06 100644
--- a/resources/js/composables/tooltip.js
+++ b/resources/js/composables/tooltip.js
@@ -12,7 +12,6 @@ let pendingEl = null;
 let tracking = false;
 let pointer = null;
 
-/* Slack around each rect, for subpixel rounding and the pointer sitting on a border. */
 const EDGE = 4;
 
 function isInteractive() {
@@ -42,8 +41,6 @@ function contains(rect, x, y, pad = EDGE) {
     );
 }
 
-/* The arrow and offset leave a gap between the trigger and the popper. Bridge it with a
-   rect covering only that gap, so the pointer can travel between the two. */
 function gapRect(trigger, popper) {
     const left = Math.min(trigger.left, popper.left);
     const right = Math.max(trigger.right, popper.right);
@@ -69,16 +66,12 @@ function onPointerMove(event) {
     if (!isPointerInside(pointer.x, pointer.y)) dismiss();
 }
 
-function onPointerGone() {
-    dismiss();
-}
-
 function startTracking() {
     if (tracking) return;
     tracking = true;
     document.addEventListener('mousemove', onPointerMove, true);
-    document.addEventListener('mouseleave', onPointerGone);
-    window.addEventListener('blur', onPointerGone);
+    document.addEventListener('mouseleave', dismiss);
+    window.addEventListener('blur', dismiss);
 }
 
 function stopTracking() {
@@ -86,8 +79,8 @@ function stopTracking() {
     tracking = false;
     pointer = null;
     document.removeEventListener('mousemove', onPointerMove, true);
-    document.removeEventListener('mouseleave', onPointerGone);
-    window.removeEventListener('blur', onPointerGone);
+    document.removeEventListener('mouseleave', dismiss);
+    window.removeEventListener('blur', dismiss);
 }
 
 function setContent(el, options) {
@@ -151,8 +144,6 @@ function show(el, options) {
 }
 
 function hide() {
-    /* An interactive tooltip stays open when the pointer leaves the trigger heading for
-       the popper. The pointer tracker dismisses it once it's outside both and the gap. */
     if (isVisible.value && isInteractive()) {
         if (pointer && !isPointerInside(pointer.x, pointer.y)) dismiss();
         return;
@@ -161,8 +152,6 @@ function hide() {
     dismiss();
 }
 
-/* Only tear down when the element owning the tooltip goes away, so unrelated elements
-   unmounting can't close a tooltip the pointer is currently using. */
 function dismissFor(el) {
     if (targetEl.value === el || pendingEl === el) dismiss();
 }
@@ -180,7 +169,6 @@ export function useTooltip() {
         targetEl: readonly(targetEl),
         show,
         hide,
-        dismiss,
         dismissFor,
         registerContentEl,
     };

From b5baf72c6ee4c04b29c2f180c27fc221df59b296 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 18 Aug 2026 17:41:13 +0100
Subject: [PATCH 05/10] Add underline to links in the tooltip

---
 resources/css/components/tooltips.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/resources/css/components/tooltips.css b/resources/css/components/tooltips.css
index 9510802e4bd..a39f82d325a 100644
--- a/resources/css/components/tooltips.css
+++ b/resources/css/components/tooltips.css
@@ -10,6 +10,10 @@
     padding: 5px 10px !important;
 }
 
+.v-popper--theme-tooltip a {
+    @apply underline;
+}
+
 .v-popper--theme-tooltip:has(.tooltip-popper-interactive),
 .v-popper--theme-tooltip:has(.tooltip-popper-interactive) .v-popper__wrapper {
     pointer-events: auto;

From 950847deb4dadfeabeb68cc2ef052b896d9c38d6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 18 Aug 2026 18:13:43 +0100
Subject: [PATCH 06/10] Opus fix - Add test and fix interactive tooltips
 dismissing in the hover gap before the popper is measured, and getting stuck
 when the pointer was never tracked.

---
 resources/js/components/Tooltips.vue |   3 +-
 resources/js/composables/tooltip.js  |  75 +++++++++--
 resources/js/tests/tooltip.test.js   | 181 +++++++++++++++++++++++++++
 3 files changed, 245 insertions(+), 14 deletions(-)
 create mode 100644 resources/js/tests/tooltip.test.js

diff --git a/resources/js/components/Tooltips.vue b/resources/js/components/Tooltips.vue
index 37a0ba659d8..133e4e02808 100644
--- a/resources/js/components/Tooltips.vue
+++ b/resources/js/components/Tooltips.vue
@@ -81,9 +81,10 @@ watch([isVisible, targetEl, content], async ([visible, target]) => {
                             class="cursor-pointer hover:underline"
                             role="button"
                             tabindex="0"
-                            :aria-label="__('Copy')"
+                            :aria-label="__('Copy :handle to clipboard', { handle: displayContent })"
                             @click.stop="copy(displayContent)"
                             @keydown.enter.prevent="copy(displayContent)"
+                            @keydown.space.prevent="copy(displayContent)"
                         >{{ displayContent }}</span>
                         <template v-else>{{ displayContent }}</template>
                     </div>
diff --git a/resources/js/composables/tooltip.js b/resources/js/composables/tooltip.js
index 9eb2e46ee06..bd0757e2aaa 100644
--- a/resources/js/composables/tooltip.js
+++ b/resources/js/composables/tooltip.js
@@ -41,29 +41,74 @@ function contains(rect, x, y, pad = EDGE) {
     );
 }
 
-function gapRect(trigger, popper) {
-    const left = Math.min(trigger.left, popper.left);
-    const right = Math.max(trigger.right, popper.right);
+export function tooltipGapRect(trigger, popper) {
+    if (!trigger || !popper) return null;
+
+    if (popper.bottom <= trigger.top) {
+        return {
+            left: Math.min(trigger.left, popper.left),
+            right: Math.max(trigger.right, popper.right),
+            top: popper.bottom,
+            bottom: trigger.top,
+        };
+    }
+
+    if (popper.top >= trigger.bottom) {
+        return {
+            left: Math.min(trigger.left, popper.left),
+            right: Math.max(trigger.right, popper.right),
+            top: trigger.bottom,
+            bottom: popper.top,
+        };
+    }
 
-    if (popper.bottom <= trigger.top) return { left, right, top: popper.bottom, bottom: trigger.top };
-    if (popper.top >= trigger.bottom) return { left, right, top: trigger.bottom, bottom: popper.top };
+    if (popper.right <= trigger.left) {
+        return {
+            left: popper.right,
+            right: trigger.left,
+            top: Math.min(trigger.top, popper.top),
+            bottom: Math.max(trigger.bottom, popper.bottom),
+        };
+    }
+
+    if (popper.left >= trigger.right) {
+        return {
+            left: trigger.right,
+            right: popper.left,
+            top: Math.min(trigger.top, popper.top),
+            bottom: Math.max(trigger.bottom, popper.bottom),
+        };
+    }
 
     return null;
 }
 
-function isPointerInside(x, y) {
-    const trigger = triggerRect();
-    const popper = popperRect();
+export function isInTooltipHoverRegion(x, y, trigger, popper, edge = EDGE) {
+    if (contains(trigger, x, y, edge) || contains(popper, x, y, edge)) return true;
+
+    // Popper isn't measured yet — keep the tooltip so the pointer can cross the gap.
+    if (trigger && !popper) return true;
+
+    return !!trigger && !!popper && contains(tooltipGapRect(trigger, popper), x, y, 0);
+}
+
+function isOverInteractiveTooltip() {
+    if (pointer) {
+        return isInTooltipHoverRegion(pointer.x, pointer.y, triggerRect(), popperRect());
+    }
 
-    if (contains(trigger, x, y) || contains(popper, x, y)) return true;
+    if (targetEl.value?.matches?.(':hover')) return true;
+    if (contentEl.value?.matches?.(':hover')) return true;
+    if (contentEl.value?.closest?.('.v-popper__popper')?.matches?.(':hover')) return true;
 
-    return !!trigger && !!popper && contains(gapRect(trigger, popper), x, y, 0);
+    // Still mounting, and we have not seen a pointer yet.
+    return isVisible.value && isInteractive() && !popperRect();
 }
 
 function onPointerMove(event) {
     pointer = { x: event.clientX, y: event.clientY };
 
-    if (!isPointerInside(pointer.x, pointer.y)) dismiss();
+    if (!isOverInteractiveTooltip()) dismiss();
 }
 
 function startTracking() {
@@ -115,6 +160,7 @@ function dismiss() {
 
     isVisible.value = false;
     targetEl.value = null;
+    contentEl.value = null;
     content.value = '';
     html.value = false;
     copyable.value = false;
@@ -145,8 +191,7 @@ function show(el, options) {
 
 function hide() {
     if (isVisible.value && isInteractive()) {
-        if (pointer && !isPointerInside(pointer.x, pointer.y)) dismiss();
-        return;
+        if (isOverInteractiveTooltip()) return;
     }
 
     dismiss();
@@ -158,6 +203,10 @@ function dismissFor(el) {
 
 function registerContentEl(el) {
     contentEl.value = el ?? null;
+
+    if (el && isVisible.value && isInteractive() && !isOverInteractiveTooltip()) {
+        dismiss();
+    }
 }
 
 export function useTooltip() {
diff --git a/resources/js/tests/tooltip.test.js b/resources/js/tests/tooltip.test.js
new file mode 100644
index 00000000000..a8e07f890d4
--- /dev/null
+++ b/resources/js/tests/tooltip.test.js
@@ -0,0 +1,181 @@
+import { test, expect, vi, beforeEach, afterEach } from 'vitest';
+import {
+    isInTooltipHoverRegion,
+    tooltipGapRect,
+    useTooltip,
+} from '../composables/tooltip';
+
+const trigger = { left: 100, right: 200, top: 200, bottom: 220 };
+const popperAbove = { left: 110, right: 190, top: 160, bottom: 190 };
+const popperBelow = { left: 110, right: 190, top: 230, bottom: 260 };
+const popperLeft = { left: 20, right: 90, top: 180, bottom: 240 };
+const popperRight = { left: 210, right: 280, top: 180, bottom: 240 };
+
+let mounted = [];
+
+function box(rect) {
+    const el = document.createElement('div');
+    el.getBoundingClientRect = () => ({
+        ...rect,
+        width: rect.right - rect.left,
+        height: rect.bottom - rect.top,
+        x: rect.left,
+        y: rect.top,
+        toJSON() {},
+    });
+    el.hovered = false;
+    el.matches = (selector) => selector === ':hover' && el.hovered;
+    el.closest = (selector) => (selector === '.v-popper__popper' ? el : null);
+    document.body.appendChild(el);
+    mounted.push(el);
+
+    return el;
+}
+
+function resetTooltip() {
+    const { hide, targetEl, dismissFor } = useTooltip();
+    if (targetEl.value) dismissFor(targetEl.value);
+    hide();
+}
+
+beforeEach(() => {
+    vi.useFakeTimers();
+    resetTooltip();
+});
+
+afterEach(() => {
+    resetTooltip();
+    mounted.forEach((el) => el.remove());
+    mounted = [];
+    vi.useRealTimers();
+});
+
+test('it treats the trigger and popper as inside the hover region', () => {
+    expect(isInTooltipHoverRegion(150, 210, trigger, popperAbove)).toBe(true);
+    expect(isInTooltipHoverRegion(150, 175, trigger, popperAbove)).toBe(true);
+});
+
+test('it treats the gap between a stacked trigger and popper as inside', () => {
+    expect(isInTooltipHoverRegion(150, 195, trigger, popperAbove)).toBe(true);
+    expect(isInTooltipHoverRegion(150, 225, trigger, popperBelow)).toBe(true);
+});
+
+test('it treats the gap between a side-placed trigger and popper as inside', () => {
+    expect(isInTooltipHoverRegion(95, 210, trigger, popperLeft)).toBe(true);
+    expect(isInTooltipHoverRegion(205, 210, trigger, popperRight)).toBe(true);
+});
+
+test('it treats points outside the hover region as outside', () => {
+    expect(isInTooltipHoverRegion(50, 50, trigger, popperAbove)).toBe(false);
+    expect(isInTooltipHoverRegion(50, 195, trigger, popperAbove)).toBe(false);
+});
+
+test('it keeps the hover region open while the popper is unmeasured', () => {
+    expect(isInTooltipHoverRegion(50, 50, trigger, null)).toBe(true);
+    expect(isInTooltipHoverRegion(150, 195, trigger, null)).toBe(true);
+});
+
+test('tooltipGapRect returns null when the rects overlap', () => {
+    const overlapping = { left: 120, right: 180, top: 210, bottom: 250 };
+
+    expect(tooltipGapRect(trigger, overlapping)).toBeNull();
+});
+
+test('an interactive tooltip stays open while the pointer crosses the gap', () => {
+    const { show, hide, isVisible, registerContentEl } = useTooltip();
+    const triggerEl = box(trigger);
+    const popperEl = box(popperAbove);
+    triggerEl.hovered = true;
+
+    show(triggerEl, { content: 'title', copyable: true });
+    vi.advanceTimersByTime(200);
+    registerContentEl(popperEl);
+
+    expect(isVisible.value).toBe(true);
+
+    triggerEl.hovered = false;
+    document.dispatchEvent(new MouseEvent('mousemove', { clientX: 150, clientY: 195, bubbles: true }));
+    hide();
+
+    expect(isVisible.value).toBe(true);
+});
+
+test('an interactive tooltip dismisses when the pointer leaves the hover region', () => {
+    const { show, isVisible, registerContentEl } = useTooltip();
+    const triggerEl = box(trigger);
+    const popperEl = box(popperAbove);
+    triggerEl.hovered = true;
+
+    show(triggerEl, { content: 'title', copyable: true });
+    vi.advanceTimersByTime(200);
+    registerContentEl(popperEl);
+
+    expect(isVisible.value).toBe(true);
+
+    triggerEl.hovered = false;
+    document.dispatchEvent(new MouseEvent('mousemove', { clientX: 50, clientY: 50, bubbles: true }));
+
+    expect(isVisible.value).toBe(false);
+});
+
+test('an interactive tooltip stays open while crossing the gap before the popper mounts', () => {
+    const { show, hide, isVisible, registerContentEl } = useTooltip();
+    const triggerEl = box(trigger);
+    const popperEl = box(popperAbove);
+
+    show(triggerEl, { content: 'title', copyable: true });
+    vi.advanceTimersByTime(200);
+
+    document.dispatchEvent(new MouseEvent('mousemove', { clientX: 150, clientY: 195, bubbles: true }));
+    hide();
+
+    expect(isVisible.value).toBe(true);
+
+    registerContentEl(popperEl);
+
+    expect(isVisible.value).toBe(true);
+});
+
+test('registering the popper dismisses when the pointer is unknown and nothing is hovered', () => {
+    const { show, isVisible, registerContentEl } = useTooltip();
+    const triggerEl = box(trigger);
+    const popperEl = box(popperAbove);
+
+    show(triggerEl, { content: 'title', copyable: true });
+    vi.advanceTimersByTime(200);
+    registerContentEl(popperEl);
+
+    expect(isVisible.value).toBe(false);
+});
+
+test('hide dismisses an interactive tooltip when the pointer is unknown and the trigger is no longer hovered', () => {
+    const { show, hide, isVisible, registerContentEl } = useTooltip();
+    const triggerEl = box(trigger);
+    const popperEl = box(popperAbove);
+    triggerEl.hovered = true;
+
+    show(triggerEl, { content: 'title', copyable: true });
+    vi.advanceTimersByTime(200);
+    registerContentEl(popperEl);
+
+    expect(isVisible.value).toBe(true);
+
+    triggerEl.hovered = false;
+    hide();
+
+    expect(isVisible.value).toBe(false);
+});
+
+test('a plain tooltip still dismisses immediately on hide', () => {
+    const { show, hide, isVisible } = useTooltip();
+    const triggerEl = box(trigger);
+
+    show(triggerEl, 'Hello');
+    vi.advanceTimersByTime(200);
+
+    expect(isVisible.value).toBe(true);
+
+    hide();
+
+    expect(isVisible.value).toBe(false);
+});

From 5cd5060c25973492362474f5453a010772252f04 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 18 Aug 2026 19:20:51 +0100
Subject: [PATCH 07/10] Make tooltip hover tunnel more forgiving

---
 resources/js/composables/tooltip.js | 19 ++++++++++---------
 resources/js/tests/tooltip.test.js  |  5 +++++
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/resources/js/composables/tooltip.js b/resources/js/composables/tooltip.js
index bd0757e2aaa..07718d329a8 100644
--- a/resources/js/composables/tooltip.js
+++ b/resources/js/composables/tooltip.js
@@ -12,7 +12,8 @@ let pendingEl = null;
 let tracking = false;
 let pointer = null;
 
-const EDGE = 4;
+const EDGE = 12;
+const GAP_SLACK = 16;
 
 function isInteractive() {
     return html.value || copyable.value;
@@ -46,8 +47,8 @@ export function tooltipGapRect(trigger, popper) {
 
     if (popper.bottom <= trigger.top) {
         return {
-            left: Math.min(trigger.left, popper.left),
-            right: Math.max(trigger.right, popper.right),
+            left: Math.min(trigger.left, popper.left) - GAP_SLACK,
+            right: Math.max(trigger.right, popper.right) + GAP_SLACK,
             top: popper.bottom,
             bottom: trigger.top,
         };
@@ -55,8 +56,8 @@ export function tooltipGapRect(trigger, popper) {
 
     if (popper.top >= trigger.bottom) {
         return {
-            left: Math.min(trigger.left, popper.left),
-            right: Math.max(trigger.right, popper.right),
+            left: Math.min(trigger.left, popper.left) - GAP_SLACK,
+            right: Math.max(trigger.right, popper.right) + GAP_SLACK,
             top: trigger.bottom,
             bottom: popper.top,
         };
@@ -66,8 +67,8 @@ export function tooltipGapRect(trigger, popper) {
         return {
             left: popper.right,
             right: trigger.left,
-            top: Math.min(trigger.top, popper.top),
-            bottom: Math.max(trigger.bottom, popper.bottom),
+            top: Math.min(trigger.top, popper.top) - GAP_SLACK,
+            bottom: Math.max(trigger.bottom, popper.bottom) + GAP_SLACK,
         };
     }
 
@@ -75,8 +76,8 @@ export function tooltipGapRect(trigger, popper) {
         return {
             left: trigger.right,
             right: popper.left,
-            top: Math.min(trigger.top, popper.top),
-            bottom: Math.max(trigger.bottom, popper.bottom),
+            top: Math.min(trigger.top, popper.top) - GAP_SLACK,
+            bottom: Math.max(trigger.bottom, popper.bottom) + GAP_SLACK,
         };
     }
 
diff --git a/resources/js/tests/tooltip.test.js b/resources/js/tests/tooltip.test.js
index a8e07f890d4..dd00d3884e8 100644
--- a/resources/js/tests/tooltip.test.js
+++ b/resources/js/tests/tooltip.test.js
@@ -65,6 +65,11 @@ test('it treats the gap between a side-placed trigger and popper as inside', ()
     expect(isInTooltipHoverRegion(205, 210, trigger, popperRight)).toBe(true);
 });
 
+test('it treats a slight sideways drift in the gap as inside', () => {
+    expect(isInTooltipHoverRegion(208, 195, trigger, popperAbove)).toBe(true);
+    expect(isInTooltipHoverRegion(92, 195, trigger, popperAbove)).toBe(true);
+});
+
 test('it treats points outside the hover region as outside', () => {
     expect(isInTooltipHoverRegion(50, 50, trigger, popperAbove)).toBe(false);
     expect(isInTooltipHoverRegion(50, 195, trigger, popperAbove)).toBe(false);

From bcd7f12875b5accb75e6743a48959538ee30d6f1 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 18 Aug 2026 19:39:53 +0100
Subject: [PATCH 08/10] Fix tooltip not working when tabbing to the "i" icon

---
 resources/js/composables/tooltip.js | 34 ++++++++++++++++++++++++-----
 resources/js/directives/tooltip.js  | 28 +++++++++++++++++++++++-
 resources/js/tests/tooltip.test.js  | 21 +++++++++++++++++-
 3 files changed, 76 insertions(+), 7 deletions(-)

diff --git a/resources/js/composables/tooltip.js b/resources/js/composables/tooltip.js
index 07718d329a8..0180a8d5331 100644
--- a/resources/js/composables/tooltip.js
+++ b/resources/js/composables/tooltip.js
@@ -93,15 +93,34 @@ export function isInTooltipHoverRegion(x, y, trigger, popper, edge = EDGE) {
     return !!trigger && !!popper && contains(tooltipGapRect(trigger, popper), x, y, 0);
 }
 
+function isTriggerEngaged() {
+    const el = targetEl.value;
+    if (!el?.isConnected) return false;
+
+    return (
+        el.matches(':hover') ||
+        el.matches(':focus') ||
+        el.matches(':focus-visible') ||
+        el.contains(document.activeElement)
+    );
+}
+
+function isPopperEngaged() {
+    const el = contentEl.value;
+    if (!el?.isConnected) return false;
+
+    const popper = el.closest('.v-popper__popper') ?? el;
+
+    return popper.matches(':hover') || popper.contains(document.activeElement);
+}
+
 function isOverInteractiveTooltip() {
+    if (isTriggerEngaged() || isPopperEngaged()) return true;
+
     if (pointer) {
         return isInTooltipHoverRegion(pointer.x, pointer.y, triggerRect(), popperRect());
     }
 
-    if (targetEl.value?.matches?.(':hover')) return true;
-    if (contentEl.value?.matches?.(':hover')) return true;
-    if (contentEl.value?.closest?.('.v-popper__popper')?.matches?.(':hover')) return true;
-
     // Still mounting, and we have not seen a pointer yet.
     return isVisible.value && isInteractive() && !popperRect();
 }
@@ -198,7 +217,12 @@ function hide() {
     dismiss();
 }
 
-function dismissFor(el) {
+function dismissFor(el, event) {
+    const next = event?.relatedTarget;
+    const popper = contentEl.value?.closest?.('.v-popper__popper') ?? contentEl.value;
+
+    if (next && popper?.contains?.(next)) return;
+
     if (targetEl.value === el || pendingEl === el) dismiss();
 }
 
diff --git a/resources/js/directives/tooltip.js b/resources/js/directives/tooltip.js
index a61fad0c6ab..6a51b22eaa4 100644
--- a/resources/js/directives/tooltip.js
+++ b/resources/js/directives/tooltip.js
@@ -12,6 +12,23 @@ function getOptions(binding) {
     return value;
 }
 
+function isNativelyFocusable(el) {
+    const tag = el.tagName;
+
+    return (
+        ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'SUMMARY'].includes(tag) ||
+        el.isContentEditable
+    );
+}
+
+function shouldBecomeFocusable(el) {
+    if (el.hasAttribute('tabindex') || isNativelyFocusable(el) || el.closest('label')) {
+        return false;
+    }
+
+    return true;
+}
+
 function handleMouseEnter(el, binding) {
     const options = getOptions(binding);
     if (options) {
@@ -24,7 +41,12 @@ export default {
         el._tooltipBinding = binding;
         el._tooltipMouseEnter = () => handleMouseEnter(el, el._tooltipBinding);
         el._tooltipMouseLeave = hide;
-        el._tooltipBlur = () => dismissFor(el);
+        el._tooltipBlur = (event) => dismissFor(el, event);
+
+        if (shouldBecomeFocusable(el)) {
+            el.tabIndex = 0;
+            el._tooltipAddedTabIndex = true;
+        }
 
         el.addEventListener('mouseenter', el._tooltipMouseEnter);
         el.addEventListener('mouseleave', el._tooltipMouseLeave);
@@ -41,6 +63,10 @@ export default {
         el.removeEventListener('mouseleave', el._tooltipMouseLeave);
         el.removeEventListener('focus', el._tooltipMouseEnter);
         el.removeEventListener('blur', el._tooltipBlur);
+        if (el._tooltipAddedTabIndex) {
+            el.removeAttribute('tabindex');
+            delete el._tooltipAddedTabIndex;
+        }
         dismissFor(el);
     },
 };
diff --git a/resources/js/tests/tooltip.test.js b/resources/js/tests/tooltip.test.js
index dd00d3884e8..f74d8164421 100644
--- a/resources/js/tests/tooltip.test.js
+++ b/resources/js/tests/tooltip.test.js
@@ -24,7 +24,13 @@ function box(rect) {
         toJSON() {},
     });
     el.hovered = false;
-    el.matches = (selector) => selector === ':hover' && el.hovered;
+    el.focused = false;
+    el.matches = (selector) => {
+        if (selector === ':hover') return el.hovered;
+        if (selector === ':focus' || selector === ':focus-visible') return el.focused;
+
+        return false;
+    };
     el.closest = (selector) => (selector === '.v-popper__popper' ? el : null);
     document.body.appendChild(el);
     mounted.push(el);
@@ -153,6 +159,19 @@ test('registering the popper dismisses when the pointer is unknown and nothing i
     expect(isVisible.value).toBe(false);
 });
 
+test('an interactive tooltip stays open when the trigger is focused without a pointer', () => {
+    const { show, isVisible, registerContentEl } = useTooltip();
+    const triggerEl = box(trigger);
+    const popperEl = box(popperAbove);
+    triggerEl.focused = true;
+
+    show(triggerEl, { content: 'title', copyable: true });
+    vi.advanceTimersByTime(200);
+    registerContentEl(popperEl);
+
+    expect(isVisible.value).toBe(true);
+});
+
 test('hide dismisses an interactive tooltip when the pointer is unknown and the trigger is no longer hovered', () => {
     const { show, hide, isVisible, registerContentEl } = useTooltip();
     const triggerEl = box(trigger);

From 89a299cb6fcdf5843febf05fbf37848baadeeb60 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 18 Aug 2026 20:20:39 +0100
Subject: [PATCH 09/10] Only add tooltip tabindex for HTML instruction
 tooltips, so status dots and other hover hints stay out of the tab order.

---
 resources/js/directives/tooltip.js | 36 +++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/resources/js/directives/tooltip.js b/resources/js/directives/tooltip.js
index 6a51b22eaa4..1dfbf11140f 100644
--- a/resources/js/directives/tooltip.js
+++ b/resources/js/directives/tooltip.js
@@ -12,6 +12,12 @@ function getOptions(binding) {
     return value;
 }
 
+function isHtmlTooltip(binding) {
+    const options = getOptions(binding);
+
+    return !!(options && typeof options === 'object' && options.html);
+}
+
 function isNativelyFocusable(el) {
     const tag = el.tagName;
 
@@ -21,14 +27,30 @@ function isNativelyFocusable(el) {
     );
 }
 
-function shouldBecomeFocusable(el) {
-    if (el.hasAttribute('tabindex') || isNativelyFocusable(el) || el.closest('label')) {
-        return false;
-    }
+function wantsAddedTabIndex(el, binding) {
+    if (!isHtmlTooltip(binding)) return false;
+    if (isNativelyFocusable(el) || el.closest('label')) return false;
+    if (el.hasAttribute('tabindex') && !el._tooltipAddedTabIndex) return false;
 
     return true;
 }
 
+function syncTabIndex(el, binding) {
+    if (wantsAddedTabIndex(el, binding)) {
+        if (el._tooltipAddedTabIndex) return;
+
+        el.tabIndex = 0;
+        el._tooltipAddedTabIndex = true;
+
+        return;
+    }
+
+    if (el._tooltipAddedTabIndex) {
+        el.removeAttribute('tabindex');
+        delete el._tooltipAddedTabIndex;
+    }
+}
+
 function handleMouseEnter(el, binding) {
     const options = getOptions(binding);
     if (options) {
@@ -43,10 +65,7 @@ export default {
         el._tooltipMouseLeave = hide;
         el._tooltipBlur = (event) => dismissFor(el, event);
 
-        if (shouldBecomeFocusable(el)) {
-            el.tabIndex = 0;
-            el._tooltipAddedTabIndex = true;
-        }
+        syncTabIndex(el, binding);
 
         el.addEventListener('mouseenter', el._tooltipMouseEnter);
         el.addEventListener('mouseleave', el._tooltipMouseLeave);
@@ -56,6 +75,7 @@ export default {
 
     updated(el, binding) {
         el._tooltipBinding = binding;
+        syncTabIndex(el, binding);
     },
 
     beforeUnmount(el) {

From f3d830db188e24c8d665e08e6c7665f69554cb98 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 18 Aug 2026 21:26:26 +0100
Subject: [PATCH 10/10] Remove some extra unneeded stuff

---
 resources/js/directives/tooltip.js | 46 ------------------------------
 1 file changed, 46 deletions(-)

diff --git a/resources/js/directives/tooltip.js b/resources/js/directives/tooltip.js
index 1dfbf11140f..7e6bd35efd2 100644
--- a/resources/js/directives/tooltip.js
+++ b/resources/js/directives/tooltip.js
@@ -12,45 +12,6 @@ function getOptions(binding) {
     return value;
 }
 
-function isHtmlTooltip(binding) {
-    const options = getOptions(binding);
-
-    return !!(options && typeof options === 'object' && options.html);
-}
-
-function isNativelyFocusable(el) {
-    const tag = el.tagName;
-
-    return (
-        ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'SUMMARY'].includes(tag) ||
-        el.isContentEditable
-    );
-}
-
-function wantsAddedTabIndex(el, binding) {
-    if (!isHtmlTooltip(binding)) return false;
-    if (isNativelyFocusable(el) || el.closest('label')) return false;
-    if (el.hasAttribute('tabindex') && !el._tooltipAddedTabIndex) return false;
-
-    return true;
-}
-
-function syncTabIndex(el, binding) {
-    if (wantsAddedTabIndex(el, binding)) {
-        if (el._tooltipAddedTabIndex) return;
-
-        el.tabIndex = 0;
-        el._tooltipAddedTabIndex = true;
-
-        return;
-    }
-
-    if (el._tooltipAddedTabIndex) {
-        el.removeAttribute('tabindex');
-        delete el._tooltipAddedTabIndex;
-    }
-}
-
 function handleMouseEnter(el, binding) {
     const options = getOptions(binding);
     if (options) {
@@ -65,8 +26,6 @@ export default {
         el._tooltipMouseLeave = hide;
         el._tooltipBlur = (event) => dismissFor(el, event);
 
-        syncTabIndex(el, binding);
-
         el.addEventListener('mouseenter', el._tooltipMouseEnter);
         el.addEventListener('mouseleave', el._tooltipMouseLeave);
         el.addEventListener('focus', el._tooltipMouseEnter);
@@ -75,7 +34,6 @@ export default {
 
     updated(el, binding) {
         el._tooltipBinding = binding;
-        syncTabIndex(el, binding);
     },
 
     beforeUnmount(el) {
@@ -83,10 +41,6 @@ export default {
         el.removeEventListener('mouseleave', el._tooltipMouseLeave);
         el.removeEventListener('focus', el._tooltipMouseEnter);
         el.removeEventListener('blur', el._tooltipBlur);
-        if (el._tooltipAddedTabIndex) {
-            el.removeAttribute('tabindex');
-            delete el._tooltipAddedTabIndex;
-        }
         dismissFor(el);
     },
 };