v150 · CSS · Sizing
Tooltip Builder
Tooltips need to "hug" short text and cap at a max width for long text — the exact semantic of fit-content(<cap>). Compare three approaches: max-content (no cap, overflows), hardcoded max-width (always full width even for short text), and width: fit-content(cap) (perfect shrink-wrap with a ceiling).
220px
max-content (no cap)
rendered: —
max-width: 220px
rendered: —
fit-content(220px) — Chrome 150
rendered: —
scenario
short text
long text
max-content
hugs content ✓
overflows ✗
max-width: cap
full width ✗
caps at max ✓
fit-content(cap)
hugs content ✓
caps at max ✓
code
/* Tooltip: shrink-wrap content, cap at 220px */
.tooltip {
width: fit-content(220px);
/* Equivalent to: min(max-content, max(min-content, 220px))
= "as narrow as content, never wider than 220px" */
}
/* Also useful for: badges, captions, pill labels, tags */
.badge { width: fit-content(120px); }
.caption { width: fit-content(60%); } /* percentage cap too */
/* Previously required two declarations: */
.tooltip-old {
max-width: 220px; /* cap — but always full width for short text */
/* no good way to shrink-wrap AND cap in one declaration */
}