ツールチップ・ポップオーバーへの text-wrap: balance

ツールチップに balance が必要な理由

ツールチップは短く（通常5〜25単語）、説明する要素のすぐ横に表示されます。「ここをクリックすると / この機能の詳細が分かります」のように折り返した不格好なツールチップは、密度の高いUIで雑音になります。バランス済みなら「ここをクリックするとこの機能の / 詳細が分かります」のように、ひとまとまりに読める形になります。

実装

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

balance に最適化対象を与えるため、max-width を必ずセットします。幅の制約がないと balance は何もできません。

パフォーマンスメモ

ホバーで表示・消去されるツールチップは、その都度レイアウト処理を発生させます。balance はそのレイアウトパスに小さなコストを追加しますが、ツールチップは定義上小さい（通常1〜3行）ため、O(n²) アルゴリズムが評価する候補数も非常に少なく済みます。ポータルのマウントやフォーカストラップのセットアップに比べれば、コストは無視できる程度です。

長めのヘルプテキストには pretty をフォールバックに

ツールチップが6行を超える場合は text-wrap: pretty に切り替えてください。balance は6行を超えると静かに無効化されますが、pretty は最終行を最適化し続けるため、長さに関わらず動作します。プログレッシブエンハンスメントは自動です — 古いブラウザはデフォルトの折り返しにフォールバックします。