UI Component Lab English

← コンポーネント一覧

オーバーレイ

Tooltip ツールチップ

要素にマウスを乗せたりフォーカスしたりしている間だけ、近くに出る短い説明。

このページのアドレスをクリップボードにコピーします

見分けるポイント

説明する要素のすぐ上か下に出る、小さな暗い色のラベル。小さな矢印が付くことが多い。

挙動

  • マウスを乗せるかキーボードでフォーカスすると少し遅れて表示され、ポインターが離れるかフォーカスが移ると消える。
  • ツールチップ自体はフォーカスを受けないため、リンクやボタンを入れてはいけない。
  • 要素から aria-describedby でツールチップを参照し、スクリーンリーダーに説明として読ませる。
  • APG の Tooltip パターンは、まだ作業中と明記されている。

キーボード操作

キー動作
Tab要素にフォーカスするとツールチップが出る。
Escツールチップを消す。
  • ポップオーバー: ツールチップはホバーやフォーカスで出て文字だけを持ち、ポップオーバーはクリックで開いてボタンやリンクも入れられる。

出典