Tooltip: Fix Chromium mispositioning on inline elements (picocss/pico#678). Add support for explicit line breaks.

Author: Amaury

CLAUDE.md

@@ -56,6 +56,7 @@ These µCSS rules exist to fix PicoCSS default behaviors:
 - `li ul, li ol { margin-bottom: 0 }` — Fix nested list extra margin (picocss/pico#672) — remove when fixed upstream
 - `nav details.dropdown { display: inline-block }` — Fix Firefox full-width nav dropdowns (picocss/pico#701) — remove when fixed upstream
 - `:where([role=group], [role=search]) + small` — Fix helper text not styled after input groups (picocss/pico#540, picocss/pico#700) — remove when fixed upstream
-- `[data-tooltip]::before { white-space: normal; max-width: 20rem }` — Fix tooltip overflow on long text (picocss/pico#665, picocss/pico#715) — remove when fixed upstream
+- `[data-tooltip] { display: inline-block }` — Fix tooltip mispositioned on inline elements in Chromium (picocss/pico#678) — remove when fixed upstream
+- `[data-tooltip]::before { white-space: pre-line; max-width: 20rem }` — Fix tooltip overflow on long text, support explicit line breaks (picocss/pico#665, picocss/pico#715) — remove when fixed upstream
 - PicoCSS sets `:where(table) { width: 100% }` — all tables are fullwidth by default, no `.table-fullwidth` class needed
 - PicoCSS `.outline` button style (3 colors) coexists with µCSS `.btn-outline` (11 colors) — different selectors, no conflict

css/mu.utilities.css

@@ -23,9 +23,15 @@ li ol {
 	color: var(--mu-del-color);
 }
 
+/* PicoCSS bugfix: tooltip mispositioned on inline elements in Chromium (picocss/pico#678) — remove when fixed upstream */
+[data-tooltip] {
+	display: inline-block;
+}
+
 /* PicoCSS bugfix: tooltips overflow on long text (picocss/pico#665, picocss/pico#715) — remove when fixed upstream */
+/* pre-line preserves explicit line breaks (
) while wrapping long text */
 [data-tooltip]::before {
-	white-space: normal;
+	white-space: pre-line;
 	max-width: 20rem;
 }
 

documentation/mu.tooltip.md

@@ -80,6 +80,16 @@ Tooltips can be placed on form elements to guide the user.
 
 ---
 
+## Long text and line breaks
+
+Long tooltip text wraps automatically (max-width: 20rem). You can also force explicit line breaks using `
` in the attribute:
+
+```html
+<span data-tooltip="Line 1&#10;Line 2&#10;Line 3">Multiline tooltip</span>
+```
+
+---
+
 ## Attribute summary
 
 | Attribute | Required | Description |