Let a rich tooltip linger after the focus leaves too

Plan step 36. The rewrite moved the rich tooltip's pointer-leave grace
from 200ms to M3's 1.5s — kept: the reference gives plain and rich
tooltips the same 1.5s, and ACT-25 names this file's 200ms. Its header
claimed the same for the focus, which still hid the bubble at once; the
focus now leaves on the same 1.5s the plain tooltip uses, and the skill
says so. The stylesheet header no longer cites chip.css and fab-menu.css
for a pulled-back actions row neither has.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 17:09:33 +02:00
co-authored by Claude Opus 5
parent 32313e0fd9
commit 97ba035b68
3 changed files with 10 additions and 10 deletions
+7 -6
View File
@@ -1,11 +1,12 @@
/**
* `materialRichTooltip`: shows an `<x-rich-tooltip>`.
*
* Transient (the default): like a plain tooltip — after a short hover on a pointer that can hover,
* at once on keyboard focus, standing for M3's 1.5s once the pointer or focus leaves (ACT-25) so
* the words can still be read while it moves on, and it stays while the pointer moves onto the
* bubble to reach its actions. Persistent: a press on the trigger opens it as a light-dismiss
* popover.
* Transient (the default): like a plain tooltip (tooltip.js) — after a short hover on a pointer
* that can hover, at once on keyboard focus, and standing for 1.5s once the pointer or the focus
* leaves, which M3 gives plain and rich tooltips alike (docs/reference/m3/
* components-actions-communication-containment.md § Tooltips, ACT-25). The bubble is inside the
* wrapper, so moving onto it to reach its actions, by pointer or by Tab, is no leave at all; Escape
* hides it at once. Persistent: a press on the trigger opens it as a light-dismiss popover.
*
* The trigger is pointed at the bubble with `aria-describedby`, so the explanation — the whole
* point of a rich tooltip — is read out with the control rather than never at all; a persistent
@@ -73,7 +74,7 @@ document.addEventListener('alpine:init', () => {
wrapper.addEventListener('pointerenter', (event) => event.pointerType === 'mouse' && show(HOVER_DELAY_MS))
wrapper.addEventListener('pointerleave', () => hide(LEAVE_GRACE_MS))
wrapper.addEventListener('focusin', (event) => event.target.matches(':focus-visible') && show(0))
wrapper.addEventListener('focusout', (event) => !wrapper.contains(event.relatedTarget) && hide())
wrapper.addEventListener('focusout', (event) => !wrapper.contains(event.relatedTarget) && hide(LEAVE_GRACE_MS))
document.addEventListener('keydown', (event) => event.key === 'Escape' && hide())
},