Andreas Reinhold / reiniandClaude Opus 5
8cb8727f75
Plan step 36 (actions). <x-rich-tooltip> renders data-md-rich-tooltip with the bubble's data-md-rich-tooltip-bubble and data-md-side, and data-md-rich-tooltip-title/-text/-actions on its plain text; no class list. rich-tooltip.css draws RichTooltipTokens' surface-container, medium corner, elevation 2, 312px bubble, its corner-to-corner anchor positioning and its fade, the same shape as tooltip.css. rich-tooltip.js's leave grace goes from 200ms to M3's 1.5s (ACT-25), matching tooltip.js. RichTooltipTest is rewritten on the hooks and ComponentStylesheet. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
72 lines
3.2 KiB
PHP
72 lines
3.2 KiB
PHP
{{-- An M3 rich tooltip: a few lines of context for a control, with an optional subhead and actions.
|
|
|
|
<x-rich-tooltip title="Expiry" text="Recipients lose access after this time. Admins can change the longest allowed.">
|
|
<x-button icon="help" aria-label="About expiry" />
|
|
<x-slot:actions><x-button label="Learn more" link="/help/expiry" /></x-slot:actions>
|
|
</x-rich-tooltip>
|
|
|
|
It wraps its trigger. By default it shows on hover and keyboard focus like a plain tooltip;
|
|
`persistent` makes it open on press instead and stay until a press elsewhere or Escape — the
|
|
form M3 asks for when it has actions. The bubble is a popover in surface-container with a
|
|
medium corner and elevation 2, 312px at most, placed by anchor positioning on `side`.
|
|
|
|
The bubble's id and anchor name are new with every render; its `wire:key` (see `<x-menu>`)
|
|
lets a Livewire morph patch it in place, so an open bubble stays open — through its own
|
|
action's `wire:click` too — and resources/js/rich-tooltip.js keeps showing and hiding the
|
|
element on the page rather than one the morph took away.
|
|
|
|
resources/js/rich-tooltip.js points the trigger at the bubble with `aria-describedby`, and a
|
|
`persistent` one also carries `aria-haspopup="dialog"` and `aria-expanded` (ACT-22): the
|
|
explanation is the whole point of a rich tooltip, and without the association a screen reader
|
|
reads only the trigger's own label. The trigger arrives in a slot, so only script can find the
|
|
element in it that takes the focus. It stands for 1.5s after the pointer or focus leaves,
|
|
M3's transient tooltip timing (ACT-25), unless `persistent` keeps it open until dismissed.
|
|
|
|
RichTooltipTokens (androidx Compose Material 3, Apache-2.0): title-small subhead and body-medium
|
|
text in on-surface-variant, label-large actions in primary. Drawn by
|
|
resources/css/components/rich-tooltip.css from `data-md-rich-tooltip` and `data-md-side`. --}}
|
|
|
|
@props([
|
|
'title' => null,
|
|
'text' => null,
|
|
'side' => 'bottom',
|
|
'persistent' => false,
|
|
])
|
|
|
|
@php
|
|
$side = in_array($side, ['top', 'bottom', 'left', 'right'], true) ? $side : 'bottom';
|
|
$key = \Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10));
|
|
$anchor = "--material-rich-tooltip-{$key}";
|
|
@endphp
|
|
|
|
<span
|
|
data-md-rich-tooltip
|
|
{{ $attributes }}
|
|
style="anchor-name: {{ $anchor }}"
|
|
x-data="materialRichTooltip({{ $persistent ? 'true' : 'false' }})"
|
|
>
|
|
{{ $trigger ?? $slot }}
|
|
|
|
<span
|
|
x-ref="bubble"
|
|
{{ new \Illuminate\View\ComponentAttributeBag(['wire:key' => 'material-rich-tooltip']) }}
|
|
id="material-rich-tooltip-{{ $key }}"
|
|
popover="{{ $persistent ? 'auto' : 'manual' }}"
|
|
role="{{ $persistent ? 'dialog' : 'tooltip' }}"
|
|
@if ($title) aria-label="{{ $title }}" @endif
|
|
data-md-rich-tooltip-bubble
|
|
data-md-side="{{ $side }}"
|
|
style="position-anchor: {{ $anchor }}"
|
|
>
|
|
@if ($title)
|
|
<span data-md-rich-tooltip-title>{{ $title }}</span>
|
|
@endif
|
|
|
|
<span data-md-rich-tooltip-text>{{ $text }}</span>
|
|
|
|
@isset($actions)
|
|
<span data-md-rich-tooltip-actions>{{ $actions }}</span>
|
|
@endisset
|
|
</span>
|
|
</span>
|