Andreas Reinhold / reiniandClaude Opus 5
147dbcf041
Plan step 36. <x-tooltip> renders data-md-tooltip and data-md-side on the bubble and data-md-tooltip-anchor on a standalone trigger's wrapper; tooltip.css draws PlainTooltipTokens' inverse-surface bubble, its anchor placement and flips per side, and the fade on the fast effects spring with @starting-style. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
48 lines
1.7 KiB
PHP
48 lines
1.7 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.
|
|
Drawn by resources/css/components/tooltip.css.
|
|
|
|
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 data-md-tooltip-anchor style="anchor-name: {{ $anchor }}">
|
|
{{ $slot }}
|
|
@endif
|
|
|
|
<span
|
|
popover="manual"
|
|
aria-hidden="true"
|
|
x-data="materialTooltip"
|
|
data-md-tooltip
|
|
data-md-side="{{ $side }}"
|
|
style="position-anchor: {{ $anchor }}"
|
|
>{{ $text }}</span>
|
|
|
|
@if ($standalone)
|
|
</span>
|
|
@endif
|