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
53 lines
2.4 KiB
PHP
53 lines
2.4 KiB
PHP
{{-- An M3 plain tooltip: a short label for a control, in the inverse surface.
|
|
|
|
Two ways in. Inside a component that already names its own anchor — `<x-button tooltip="…">`
|
|
passes `anchor` — it is a bare popover. Standalone, it wraps its trigger:
|
|
|
|
<x-tooltip text="Copy link"><button …>…</button></x-tooltip>
|
|
|
|
It shows after a short hover on a pointer that can hover, at once on keyboard focus, and hides
|
|
at once on a press or Escape; leaving or blurring lets it stand for M3's 1.5s. Only one
|
|
tooltip is on screen at a time, as M3 asks. A phone has no hover, so a control there carries its
|
|
words. The bubble is a `popover="manual"` in the top layer — never clipped by an
|
|
`overflow-hidden` parent, never widening a scroll container — placed by CSS anchor
|
|
positioning on `side` (`top`, `bottom`, `left`, `right`), flipping when there is no room.
|
|
|
|
It is aria-hidden: an icon button takes the same words as its aria-label, and a labelled
|
|
control would otherwise read them twice. --}}
|
|
|
|
@props([
|
|
'text',
|
|
'side' => 'top',
|
|
'anchor' => null,
|
|
])
|
|
|
|
@php
|
|
$side = in_array($side, ['top', 'bottom', 'left', 'right'], true) ? $side : 'top';
|
|
$standalone = $anchor === null;
|
|
$anchor ??= '--material-tooltip-'.\Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10));
|
|
@endphp
|
|
|
|
@if ($standalone)
|
|
<span class="inline-flex" style="anchor-name: {{ $anchor }}">
|
|
{{ $slot }}
|
|
@endif
|
|
|
|
<span
|
|
popover="manual"
|
|
aria-hidden="true"
|
|
x-data="materialTooltip"
|
|
style="position-anchor: {{ $anchor }}"
|
|
@class([
|
|
'pointer-events-none m-0 max-w-50 overflow-visible border-0 rounded-corner-xs bg-inverse-surface px-2 py-1 text-center whitespace-normal type-body-sm text-inverse-on-surface [inset:auto]',
|
|
'opacity-0 transition-[opacity,display,overlay] transition-discrete duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast open:opacity-100 starting:open:opacity-0',
|
|
'my-1 [position-area:top] [position-try-fallbacks:flip-block]' => $side === 'top',
|
|
'my-1 [position-area:bottom] [position-try-fallbacks:flip-block]' => $side === 'bottom',
|
|
'mx-1 [position-area:left] [position-try-fallbacks:flip-inline]' => $side === 'left',
|
|
'mx-1 [position-area:right] [position-try-fallbacks:flip-inline]' => $side === 'right',
|
|
])
|
|
>{{ $text }}</span>
|
|
|
|
@if ($standalone)
|
|
</span>
|
|
@endif
|