Draw the plain tooltip without Tailwind

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

resources/css/components.css

@@ -13,6 +13,7 @@
 
 /* Actions and communication */
 @import './components/loading.css';
+@import './components/tooltip.css';
 
 /* Inputs, selection and data */
 

resources/css/components/tooltip.css

@@ -0,0 +1,80 @@
+/*
+ * <x-tooltip>: M3's plain tooltip, a short label for a control in the inverse surface.
+ *
+ * The bubble is a `popover="manual"` in the top layer, so no `overflow: hidden` parent clips it,
+ * placed by CSS anchor positioning on its `data-md-side` and flipping to the other side where the
+ * window has no room. PlainTooltipTokens and TooltipDefaults (androidx Compose Material 3,
+ * Apache-2.0): `inverse-surface` container with the extra-small corner, `body-small` supporting
+ * text in `inverse-on-surface`, 8px either side and 4px above and below, 200px wide at most, 4px
+ * from its anchor. It never takes the pointer, so it can stand over the control it names.
+ *
+ * It fades in and out on the fast effects spring; `allow-discrete` keeps `display` and `overlay`
+ * alive until the fade out has been seen, and `@starting-style` gives the fade in a start.
+ * resources/js/tooltip.js shows and hides it.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@layer material.components {
+    [data-md-tooltip-anchor] {
+        display: inline-flex;
+    }
+
+    [data-md-tooltip] {
+        inset: auto;
+        margin: 0;
+        max-inline-size: 200px;
+        overflow: visible;
+        border: 0;
+        border-radius: var(--md-sys-shape-corner-xs);
+        padding-block: var(--md-sys-measurement-space50);
+        padding-inline: var(--md-sys-measurement-space100);
+        background-color: var(--md-sys-color-inverse-surface);
+        color: var(--md-sys-color-inverse-on-surface);
+        font: var(--md-sys-typescale-body-sm);
+        letter-spacing: var(--md-sys-typescale-body-sm-tracking);
+        font-variation-settings: normal;
+        text-align: center;
+        white-space: normal;
+        pointer-events: none;
+        opacity: 0;
+        transition-property: opacity, display, overlay;
+        transition-duration: var(--md-sys-motion-effects-fast-duration);
+        transition-timing-function: var(--md-sys-motion-effects-fast);
+        transition-behavior: allow-discrete;
+
+        &:popover-open {
+            opacity: 1;
+
+            @starting-style {
+                opacity: 0;
+            }
+        }
+    }
+
+    [data-md-tooltip]:is([data-md-side='top'], [data-md-side='bottom']) {
+        margin-block: var(--md-sys-measurement-space50);
+        position-try-fallbacks: flip-block;
+    }
+
+    [data-md-tooltip]:is([data-md-side='left'], [data-md-side='right']) {
+        margin-inline: var(--md-sys-measurement-space50);
+        position-try-fallbacks: flip-inline;
+    }
+
+    [data-md-tooltip][data-md-side='top'] {
+        position-area: top;
+    }
+
+    [data-md-tooltip][data-md-side='bottom'] {
+        position-area: bottom;
+    }
+
+    [data-md-tooltip][data-md-side='left'] {
+        position-area: left;
+    }
+
+    [data-md-tooltip][data-md-side='right'] {
+        position-area: right;
+    }
+}

resources/views/components/tooltip.blade.php

@@ -9,8 +9,9 @@
      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
+     `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. --}}
@@ -28,7 +29,7 @@
 @endphp
 
 @if ($standalone)
-    <span class="inline-flex" style="anchor-name: {{ $anchor }}">
+    <span data-md-tooltip-anchor style="anchor-name: {{ $anchor }}">
         {{ $slot }}
 @endif
 
@@ -36,15 +37,9 @@
     popover="manual"
     aria-hidden="true"
     x-data="materialTooltip"
+    data-md-tooltip
+    data-md-side="{{ $side }}"
     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)

tests/Feature/Components/ActionStylesheetsTest.php

@@ -12,6 +12,7 @@ use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
  */
 dataset('action components', [
     'loading',
+    'tooltip',
 ]);
 
 it('draws the component from a stylesheet shaped like every package stylesheet', function (string $name) {
@@ -54,8 +55,8 @@ it('takes its values from the tokens and its breakpoints in px', function (strin
 
     // Colours are roles, shadows are elevation levels, type is a type style, motion is a spring.
     expect($source)->not->toMatch('/#[0-9a-f]{3,8}\b|\b(?:rgba?|hsla?|oklch|oklab|lab|lch)\(/i')
-        ->not->toMatch('/\bbox-shadow:\s*(?!none|var\(--md-)/')
+        ->not->toMatch('/\bbox-shadow:(?!\s*(?:none|var\(--md-))/')
-        ->not->toMatch('/\bfont:\s*(?!var\(--md-sys-typescale-)/')
+        ->not->toMatch('/\bfont:(?!\s*var\(--md-sys-typescale-)/')
         ->not->toMatch('/\btransition[a-z-]*:[^;]*(?:\d+m?s\b|\bease\b|ease-in|ease-out|cubic-bezier)/');
 
     foreach ($css->mediaQueries() as $query) {

tests/Feature/Components/ButtonTest.php

@@ -160,7 +160,7 @@ it('anchors its tooltip to itself', function () {
 
     expect($anchor)->not->toBeEmpty()
         ->and($html)->toContain("position-anchor: {$anchor[1]}")
-        ->toContain('[position-area:bottom]')
+        ->toContain('data-md-side="bottom"')
         ->not->toContain('aria-label="Saves the draft"');
 });
 

tests/Feature/Components/TooltipTest.php

@@ -1,5 +1,7 @@
 <?php
 
+use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
+
 it('wraps a trigger and anchors the bubble to it', function () {
     $html = (string) $this->blade('<x-tooltip text="Copy link"><button>Copy</button></x-tooltip>');
 
@@ -7,22 +9,49 @@ it('wraps a trigger and anchors the bubble to it', function () {
 
     expect($anchor)->not->toBeEmpty()
         ->and($html)
-        ->toContain('<button>Copy</button>')
+        ->toMatch('/<span data-md-tooltip-anchor style="anchor-name: --material-tooltip-[a-z0-9]+">\s*<button>Copy<\/button>/')
-        ->toContain('popover="manual"')
+        ->toMatch('/<span\s+popover="manual"\s+aria-hidden="true"\s+x-data="materialTooltip"\s+data-md-tooltip\s+data-md-side="top"\s+style="position-anchor: '.preg_quote($anchor[1], '/').'"\s*>Copy link<\/span>/')
-        ->toContain('x-data="materialTooltip"')
+        ->not->toContain('class=');
-        ->toContain("position-anchor: {$anchor[1]}")
-        ->toContain('bg-inverse-surface')
-        ->toContain('[position-area:top]');
 });
 
-it('places the bubble on the side asked for, flipping when there is no room', function (string $side, string $classes) {
+it('places the bubble on the side asked for, 4px out, flipping when there is no room', function (string $side, string $axis, string $margin, string $flip) {
-    expect((string) $this->blade("<x-tooltip text=\"Hi\" side=\"{$side}\"><span>x</span></x-tooltip>"))->toContain($classes);
+    $css = ComponentStylesheet::read('tooltip');
+
+    expect((string) $this->blade("<x-tooltip text=\"Hi\" side=\"{$side}\"><span>x</span></x-tooltip>"))->toContain("data-md-side=\"{$side}\"")
+        ->and($css->declarations("[data-md-tooltip][data-md-side='{$side}']"))->toBe(['position-area' => $side])
+        ->and($css->declarations("[data-md-tooltip]:is({$axis})"))->toBe([$margin => 'var(--md-sys-measurement-space50)', 'position-try-fallbacks' => $flip]);
 })->with([
-    'bottom' => ['bottom', '[position-area:bottom] [position-try-fallbacks:flip-block]'],
+    'top' => ['top', "[data-md-side='top'], [data-md-side='bottom']", 'margin-block', 'flip-block'],
-    'left' => ['left', '[position-area:left] [position-try-fallbacks:flip-inline]'],
+    'bottom' => ['bottom', "[data-md-side='top'], [data-md-side='bottom']", 'margin-block', 'flip-block'],
-    'right' => ['right', '[position-area:right] [position-try-fallbacks:flip-inline]'],
+    'left' => ['left', "[data-md-side='left'], [data-md-side='right']", 'margin-inline', 'flip-inline'],
+    'right' => ['right', "[data-md-side='left'], [data-md-side='right']", 'margin-inline', 'flip-inline'],
 ]);
 
+it('falls back to the top for a side it does not know', function () {
+    expect((string) $this->blade('<x-tooltip text="Hi" side="middle"><span>x</span></x-tooltip>'))->toContain('data-md-side="top"');
+});
+
+it('draws M3\'s plain tooltip in the inverse surface, and fades on the effects spring', function () {
+    $css = ComponentStylesheet::read('tooltip');
+
+    expect($css->declarations('[data-md-tooltip]'))->toMatchArray([
+        'max-inline-size' => '200px',
+        'border-radius' => 'var(--md-sys-shape-corner-xs)',
+        'padding-block' => 'var(--md-sys-measurement-space50)',
+        'padding-inline' => 'var(--md-sys-measurement-space100)',
+        'background-color' => 'var(--md-sys-color-inverse-surface)',
+        'color' => 'var(--md-sys-color-inverse-on-surface)',
+        'font' => 'var(--md-sys-typescale-body-sm)',
+        'pointer-events' => 'none',
+        'opacity' => '0',
+        'transition-duration' => 'var(--md-sys-motion-effects-fast-duration)',
+        'transition-timing-function' => 'var(--md-sys-motion-effects-fast)',
+        'transition-behavior' => 'allow-discrete',
+    ])
+        ->and($css->declarations('[data-md-tooltip]:popover-open'))->toBe(['opacity' => '1'])
+        ->and($css->declarations('[data-md-tooltip]:popover-open', ['@starting-style']))->toBe(['opacity' => '0']);
+});
+
 it('escapes its text', function () {
     $this->blade('<x-tooltip text="<b>bold</b>"><span>x</span></x-tooltip>')
         ->assertSee('&lt;b&gt;bold&lt;/b&gt;', false);