状態とフィードバック / もう少し詳しく
Tooltip
略語や短いラベルの詳しい説明を補う、CSSによるヒント。
基本的な使い方
下限は特定できた範囲を示す値であり、合計を保証するものではありません。
HTML
<p><span class="hint" tabindex="0" data-dd-hint="解析が途中で止まりました。実際の件数はさらに多い可能性があります。">下限</span>は特定できた範囲を示す値であり、合計を保証するものではありません。</p>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.hint | ヒントを添える文字。 |
data-dd-hint | 補足の説明。 |
tabindex="0" | キーボードでヒントに到達できるようにします。 |
.tooltip-end | 端に近い場合、ツールチップを右端に揃えます。 |
使い方の注意
重要な情報をツールチップだけに置かないでください。タッチ操作やホバーを使わない読者のために、意味を本文にも残します。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。