noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Draw the rich tooltip without Tailwind

Browse Source 
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
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 16:35:36 +02:00
co-authored by Claude Opus 5
parent 3680808ae8
commit 8cb8727f75
6 changed files with 165 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/rich-tooltip.blade.php
+14 -17
View File
@@ -16,13 +16,15 @@
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`: 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.
`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. --}}
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,
@@ -38,7 +40,8 @@
@endphp
<span
{{ $attributes->class('inline-flex') }}
data-md-rich-tooltip
{{ $attributes }}
style="anchor-name: {{ $anchor }}"
x-data="materialRichTooltip({{ $persistent ? 'true' : 'false' }})"
>
@@ -51,24 +54,18 @@
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 }}"
@class([
'm-0 w-max max-w-78 overflow-visible border-0 rounded-corner-md bg-surface-container px-4 pt-3 pb-2 text-start whitespace-normal shadow-elevation-2 [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:bottom_span-right] [position-try-fallbacks:flip-block,flip-inline]' => $side === 'bottom',
'my-1 [position-area:top_span-right] [position-try-fallbacks:flip-block,flip-inline]' => $side === 'top',
'mx-1 [position-area:left_span-bottom] [position-try-fallbacks:flip-inline,flip-block]' => $side === 'left',
'mx-1 [position-area:right_span-bottom] [position-try-fallbacks:flip-inline,flip-block]' => $side === 'right',
])
>
@if ($title)
<span class="mb-1 block type-title-sm text-on-surface-variant">{{ $title }}</span>
<span data-md-rich-tooltip-title>{{ $title }}</span>
@endif
<span class="block pb-2 type-body-md text-on-surface-variant">{{ $text }}</span>
<span data-md-rich-tooltip-text>{{ $text }}</span>
@isset($actions)
<span class="-ms-3 flex flex-wrap gap-2">{{ $actions }}</span>
<span data-md-rich-tooltip-actions>{{ $actions }}</span>
@endisset
</span>
</span>