Draw the rich tooltip without Tailwind

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
2026-09-14 16:35:36 +02:00
parent 3680808ae8
commit 8cb8727f75
6 changed files with 165 additions and 23 deletions
@@ -0,0 +1,109 @@
+/*
+ * <x-rich-tooltip>: an M3 rich tooltip, a few lines of context for a control, with an optional
+ * subhead and actions.
+ *
+ * RichTooltipTokens (androidx Compose Material 3, Apache-2.0): surface-container, the medium
+ * corner, elevation 2, 312px wide at most, 16px either side, 12px above the subhead (or the text
+ * when there is none) and 8px below it. Title-small subhead and body-medium text in
+ * on-surface-variant, label-large actions in primary — the actions row pulls itself back to the
+ * text's edge with a negative margin, the trick every text-button row in this package uses
+ * (chip.css, fab-menu.css).
+ *
+ * Placed by CSS anchor positioning on `data-md-side`, corner-to-corner so the 312px bubble has
+ * room to spread past a narrow trigger; `position-try-fallbacks` flips it when the window has no
+ * room, same shape as tooltip.css's plain tooltip. It fades in and out on the fast effects spring,
+ * `allow-discrete` keeping `display` and `overlay` alive for the fade out and `@starting-style`
+ * giving the fade in a start.
+ *
+ * resources/js/rich-tooltip.js shows and hides the bubble and keeps the trigger described with
+ * `aria-describedby` — and, while `persistent`, `aria-haspopup`/`aria-expanded` (ACT-22) — none of
+ * which this stylesheet draws.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@layer material.components {
+    [data-md-rich-tooltip] {
+        display: inline-flex;
+    }
+
+    [data-md-rich-tooltip-bubble] {
+        inset: auto;
+        margin: 0;
+        overflow: visible;
+        width: max-content;
+        max-width: 312px;
+        border-width: 0;
+        border-radius: var(--md-sys-shape-corner-md);
+        padding-inline: var(--md-sys-measurement-space200);
+        padding-block: 12px var(--md-sys-measurement-space100);
+        background-color: var(--md-sys-color-surface-container);
+        box-shadow: var(--md-sys-elevation-2);
+        text-align: start;
+        white-space: normal;
+        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-rich-tooltip-bubble]:is([data-md-side='top'], [data-md-side='bottom']) {
+        margin-block: var(--md-sys-measurement-space50);
+        position-try-fallbacks: flip-block, flip-inline;
+    }
+
+    [data-md-rich-tooltip-bubble]:is([data-md-side='left'], [data-md-side='right']) {
+        margin-inline: var(--md-sys-measurement-space50);
+        position-try-fallbacks: flip-inline, flip-block;
+    }
+
+    [data-md-rich-tooltip-bubble][data-md-side='top'] {
+        position-area: top span-right;
+    }
+
+    [data-md-rich-tooltip-bubble][data-md-side='bottom'] {
+        position-area: bottom span-right;
+    }
+
+    [data-md-rich-tooltip-bubble][data-md-side='left'] {
+        position-area: left span-bottom;
+    }
+
+    [data-md-rich-tooltip-bubble][data-md-side='right'] {
+        position-area: right span-bottom;
+    }
+
+    [data-md-rich-tooltip-title] {
+        display: block;
+        margin-block-end: var(--md-sys-measurement-space50);
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-title-sm);
+        letter-spacing: var(--md-sys-typescale-title-sm-tracking);
+        font-variation-settings: normal;
+    }
+
+    [data-md-rich-tooltip-text] {
+        display: block;
+        padding-block-end: var(--md-sys-measurement-space100);
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-body-md);
+        letter-spacing: var(--md-sys-typescale-body-md-tracking);
+        font-variation-settings: normal;
+    }
+
+    [data-md-rich-tooltip-actions] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--md-sys-measurement-space100);
+        margin-inline-start: -12px;
+    }
+}