Andreas ReinholdandClaude Opus 5
05236ecb3a
A plain tooltip vanished the instant the pointer left, where M3 keeps one for 1.5s and shows only one at a time — these are popover="manual", so nothing was closing the last one. A rich tooltip's bubble was never associated with its trigger at all, so the explanation it exists to give was never announced; the script now writes aria-describedby (and aria-haspopup/aria-expanded when it is persistent) onto the focusable control in the trigger slot, and again after a morph. Plan step 18, actions.md ACT-22, ACT-25. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
80 lines
2.8 KiB
JavaScript
80 lines
2.8 KiB
JavaScript
/**
|
|
* `materialTooltip`: shows an `<x-tooltip>` popover for the control it belongs to.
|
|
*
|
|
* The trigger is the popover's parent element (the button, or the standalone wrapper). Hover
|
|
* counts only for a pointer that can hover, after a short delay so a pointer passing over a
|
|
* toolbar does not flash every label; keyboard focus shows it at once. A press and Escape hide it
|
|
* at once; leaving and blur let it stand for M3's 1.5s, so the words can still be read while the
|
|
* pointer moves on. Only one tooltip is up at a time: showing one takes the last one down, which
|
|
* the browser will not do for us because these are `popover="manual"`.
|
|
*/
|
|
const HOVER_DELAY_MS = 500
|
|
const LEAVE_DELAY_MS = 1500
|
|
|
|
let visible = null
|
|
|
|
document.addEventListener('alpine:init', () => {
|
|
window.Alpine.data('materialTooltip', () => ({
|
|
timer: null,
|
|
listeners: [],
|
|
|
|
init() {
|
|
const tip = this.$el
|
|
const trigger = tip.parentElement
|
|
|
|
const open = () => tip.matches(':popover-open')
|
|
|
|
const show = (delay) => {
|
|
clearTimeout(this.timer)
|
|
this.timer = setTimeout(() => {
|
|
if (!tip.isConnected || open()) {
|
|
return
|
|
}
|
|
|
|
if (visible && visible !== tip && visible.matches(':popover-open')) {
|
|
visible.hidePopover()
|
|
}
|
|
|
|
visible = tip
|
|
tip.showPopover()
|
|
}, delay)
|
|
}
|
|
|
|
const hide = (delay = 0) => {
|
|
clearTimeout(this.timer)
|
|
this.timer = setTimeout(() => {
|
|
if (open()) {
|
|
tip.hidePopover()
|
|
}
|
|
|
|
if (visible === tip) {
|
|
visible = null
|
|
}
|
|
}, delay)
|
|
}
|
|
|
|
this.listen(trigger, 'pointerenter', (event) => event.pointerType === 'mouse' && show(HOVER_DELAY_MS))
|
|
this.listen(trigger, 'pointerleave', () => hide(LEAVE_DELAY_MS))
|
|
this.listen(trigger, 'pointerdown', () => hide())
|
|
this.listen(trigger, 'focusin', () => trigger.matches(':focus-within:has(:focus-visible), :focus-visible') && show(0))
|
|
this.listen(trigger, 'focusout', () => hide(LEAVE_DELAY_MS))
|
|
this.listen(document, 'keydown', (event) => event.key === 'Escape' && hide())
|
|
},
|
|
|
|
listen(target, type, handler) {
|
|
target.addEventListener(type, handler)
|
|
this.listeners.push(() => target.removeEventListener(type, handler))
|
|
},
|
|
|
|
destroy() {
|
|
clearTimeout(this.timer)
|
|
|
|
if (visible === this.$el) {
|
|
visible = null
|
|
}
|
|
|
|
this.listeners.forEach((remove) => remove())
|
|
},
|
|
}))
|
|
})
|