Andreas Reinhold / reiniandClaude Sonnet 5
cfc57a9867
Plan step 39 (part 0): the step 38 review found <x-scaffold> and <x-tooltip> never referencing $attributes, so a caller's class and style were silently dropped. The scaffold's root is its single data-md-scaffold div; the tooltip's root, documented in its header, is the standalone wrapper it draws around a trigger (data-md-tooltip-anchor, merged with its own anchor-name) — passed an anchor instead, it renders only a popover fragment beside another component's root and takes nothing of the caller's. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
55 lines
2.2 KiB
PHP
55 lines
2.2 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.
|
|
|
|
The caller's `class` and `style` land on the root — standalone, that is the wrapper this
|
|
component draws around the trigger (`data-md-tooltip-anchor`), merged with its own
|
|
`anchor-name`. Passed an `anchor` instead, the component renders no wrapper of its own: only
|
|
the popover bubble, a fragment beside another component's root (`<x-button tooltip>` and
|
|
friends never forward a caller's attributes to it), so there is nothing of the caller's to
|
|
place. --}}
|
|
|
|
@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 {{ $attributes->merge(['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
|