text-wrap: balance for Tooltips and Popovers

Why Tooltips Need balance

Tooltips are short (usually 5-25 words) and sit right next to the element they describe. A poorly wrapped tooltip — say, "Click here to learn / more about this feature" — feels noisy in a dense UI. Balanced wrapping produces "Click here to learn more / about this feature", which reads as one cohesive unit.

Implementation

.tooltip {
  max-width: 240px;
  padding: 0.5rem 0.75rem;
  text-wrap: balance;
  font-size: 0.8125rem;
  line-height: 1.4;
}

Pair with a hard max-width so balance has a constraint to optimize against. Without a width cap, balance has nothing to balance.

Performance note

Tooltips that appear and disappear on hover trigger layout work each time. balance adds a small cost to that layout pass, but tooltips are by definition small (usually 1-3 lines), so the O(n²) algorithm has very few candidates to consider. The cost is negligible compared to a portal mount or focus-trap setup.

Pretty as a fallback for longer help-text

If your tooltip exceeds about 6 lines, switch to text-wrap: pretty. balance will silently disable past the 6-line cap; pretty will optimize the trailing lines and continue working at any length. The progressive enhancement is automatic — older browsers fall back to default wrapping with no breakage.