diff --git a/resources/css/components/tooltips.css b/resources/css/components/tooltips.css
index ec610e1bea8..a39f82d325a 100644
--- a/resources/css/components/tooltips.css
+++ b/resources/css/components/tooltips.css
@@ -9,3 +9,12 @@
 .v-popper--theme-tooltip .v-popper__inner {
     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;
+}
diff --git a/resources/js/components/Tooltips.vue b/resources/js/components/Tooltips.vue
index d1d2a963361..133e4e02808 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 } = useTooltip();
+const { isVisible, content, html, copyable, targetEl, registerContentEl } = 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++;
@@ -66,8 +71,23 @@ 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
+                        :ref="registerContentEl"
+                        :class="{ 'tooltip-popper-interactive': isInteractive }"
+                    >
+                        <div v-if="displayHtml" v-html="displayContent" />
+                        <span
+                            v-else-if="displayCopyable && copySupported"
+                            class="cursor-pointer hover:underline"
+                            role="button"
+                            tabindex="0"
+                            :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>
                 </template>
             </VTooltip>
         </div>
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 2b5c1778dab..0180a8d5331 100644
--- a/resources/js/composables/tooltip.js
+++ b/resources/js/composables/tooltip.js
@@ -3,10 +3,150 @@ 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);
+const contentEl = shallowRef(null);
 
-let hideTimeout = null;
 let showTimeout = null;
+let pendingEl = null;
+let tracking = false;
+let pointer = null;
+
+const EDGE = 12;
+const GAP_SLACK = 16;
+
+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
+    );
+}
+
+export function tooltipGapRect(trigger, popper) {
+    if (!trigger || !popper) return null;
+
+    if (popper.bottom <= trigger.top) {
+        return {
+            left: Math.min(trigger.left, popper.left) - GAP_SLACK,
+            right: Math.max(trigger.right, popper.right) + GAP_SLACK,
+            top: popper.bottom,
+            bottom: trigger.top,
+        };
+    }
+
+    if (popper.top >= trigger.bottom) {
+        return {
+            left: Math.min(trigger.left, popper.left) - GAP_SLACK,
+            right: Math.max(trigger.right, popper.right) + GAP_SLACK,
+            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) - GAP_SLACK,
+            bottom: Math.max(trigger.bottom, popper.bottom) + GAP_SLACK,
+        };
+    }
+
+    if (popper.left >= trigger.right) {
+        return {
+            left: trigger.right,
+            right: popper.left,
+            top: Math.min(trigger.top, popper.top) - GAP_SLACK,
+            bottom: Math.max(trigger.bottom, popper.bottom) + GAP_SLACK,
+        };
+    }
+
+    return null;
+}
+
+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 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());
+    }
+
+    // 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 (!isOverInteractiveTooltip()) dismiss();
+}
+
+function startTracking() {
+    if (tracking) return;
+    tracking = true;
+    document.addEventListener('mousemove', onPointerMove, true);
+    document.addEventListener('mouseleave', dismiss);
+    window.addEventListener('blur', dismiss);
+}
+
+function stopTracking() {
+    if (!tracking) return;
+    tracking = false;
+    pointer = null;
+    document.removeEventListener('mousemove', onPointerMove, true);
+    document.removeEventListener('mouseleave', dismiss);
+    window.removeEventListener('blur', dismiss);
+}
 
 function setContent(el, options) {
     targetEl.value = el;
@@ -14,21 +154,39 @@ 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;
     }
+
+    isInteractive() ? startTracking() : stopTracking();
 }
 
-function show(el, options) {
-    if (hideTimeout) {
-        clearTimeout(hideTimeout);
-        hideTimeout = null;
+function dismiss() {
+    stopTracking();
+
+    if (showTimeout) {
+        clearTimeout(showTimeout);
+        showTimeout = null;
     }
 
+    pendingEl = null;
+
+    isVisible.value = false;
+    targetEl.value = null;
+    contentEl.value = null;
+    content.value = '';
+    html.value = false;
+    copyable.value = false;
+}
+
+function show(el, options) {
     if (showTimeout) {
         clearTimeout(showTimeout);
     }
@@ -39,7 +197,10 @@ function show(el, options) {
         return;
     }
 
+    pendingEl = el;
+
     showTimeout = setTimeout(() => {
+        pendingEl = null;
         setContent(el, options);
 
         if (content.value) {
@@ -49,17 +210,28 @@ function show(el, options) {
 }
 
 function hide() {
-    if (showTimeout) {
-        clearTimeout(showTimeout);
-        showTimeout = null;
+    if (isVisible.value && isInteractive()) {
+        if (isOverInteractiveTooltip()) return;
     }
 
-    hideTimeout = setTimeout(() => {
-        isVisible.value = false;
-        targetEl.value = null;
-        content.value = '';
-        html.value = false;
-    }, 50);
+    dismiss();
+}
+
+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();
+}
+
+function registerContentEl(el) {
+    contentEl.value = el ?? null;
+
+    if (el && isVisible.value && isInteractive() && !isOverInteractiveTooltip()) {
+        dismiss();
+    }
 }
 
 export function useTooltip() {
@@ -67,8 +239,11 @@ export function useTooltip() {
         isVisible: readonly(isVisible),
         content: readonly(content),
         html: readonly(html),
+        copyable: readonly(copyable),
         targetEl: readonly(targetEl),
         show,
         hide,
+        dismissFor,
+        registerContentEl,
     };
 }
diff --git a/resources/js/directives/tooltip.js b/resources/js/directives/tooltip.js
index 8ae42ce4e22..7e6bd35efd2 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,20 +19,17 @@ function handleMouseEnter(el, binding) {
     }
 }
 
-function handleMouseLeave() {
-    hide();
-}
-
 export default {
     mounted(el, binding) {
         el._tooltipBinding = binding;
         el._tooltipMouseEnter = () => handleMouseEnter(el, el._tooltipBinding);
-        el._tooltipMouseLeave = handleMouseLeave;
+        el._tooltipMouseLeave = hide;
+        el._tooltipBlur = (event) => dismissFor(el, event);
 
         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) {
@@ -43,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);
     },
 };
diff --git a/resources/js/tests/tooltip.test.js b/resources/js/tests/tooltip.test.js
new file mode 100644
index 00000000000..f74d8164421
--- /dev/null
+++ b/resources/js/tests/tooltip.test.js
@@ -0,0 +1,205 @@
+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.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);
+
+    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 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);
+});
+
+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('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);
+    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);
+});