本文へ移動
つまずき地図Vibe Dev Navigator
メニュー

AIでサービスをつくる、非エンジニアのための実践ガイド

UI・動きカタログ

ツールチップ

Tooltip

アイコンや短い言葉へ触れると、小さな補足が現れるUIです。

危険度: 通常補足

今すぐ使う

見た目と使いどころを確かめる

まず動きを試し、意図に合うかを見てください。停止しても内容が分かる設計です。

動きを試す

ツールチップ

対象へマウスを重ねるかキーボードで選ぶと、近くに一文の補足が現れます。

AIへの依頼文

ツールチップを追加する依頼

危険度:通常

内容と対象をひと目確認してから使うと安心です。

分かる範囲で2か所だけ

自分の状況を入れる

空欄のままでもコピーできます。秘密情報は書かずにお試しください。

コピーされる依頼文を確認
目的:
アイコンや短い言葉の意味を補う、閉じられて読み上げにも伝わるツールチップを追加する。

現在の状態:
【ここに、何をしたらどうなったかを書く】

今回依頼すること:
指定した要素に短いツールチップを追加してください。マウスを重ねたときとキーボードフォーカス時に表示し、Escapeで閉じられるようにしてください。操作が必要なリンクやボタンはツールチップ内へ置かないでください。

変更してよい範囲:
【ここに、変更してよい画面やファイルを書く】

変更しない範囲:
重要情報をツールチップだけへ移す、長文や操作ボタンを入れる、フォーカスをツールチップへ移す実装は行わない。

完了条件:
- 元の要素と補足の関係が支援技術へ伝わる
- マウスとキーボードの両方で内容を確認できる
- Escape、マウスアウト、フォーカス移動で閉じられる

実装前に確認すること:
- 対象とするファイル、現在の差分、関連する設定を読み取り、変更計画を短く示す
- 判断できない点があれば、変更する前に止めて質問する

実装後に報告すること:
- 変更したファイルと変更理由
- 実行した確認と、その結果
- 未解決の点や追加で確認が必要な点

使う前に確認
使った後に確認

10秒で分かる説明

対象へマウスを重ねるかキーボードで選ぶと、近くに一文の補足が現れます。

向いている場面

  • 短いアイコン名を一文だけ補足する
  • 本文を増やさず、任意の小さな説明を添える

確かめる

使いすぎと操作の妨げを防ぐ

見た目の気持ちよさより、読みやすさと操作しやすさを優先します。

向いていない場面

  • 必ず読む必要がある情報
  • リンクやボタンを含む長い内容

アクセシビリティ

  • マウスだけでなくキーボードフォーカスでも表示する
  • フォーカスは元の要素へ保ち、Escapeで閉じられるようにする

理解する

名前と仕組みを知る

AIへ伝えるときに役立つ名前と、実装で確認するポイントです。

別名・探すときの言葉

吹き出し説明・ホバー説明・補足ポップアップ

実装時の確認

  • 元の要素からaria-describedbyで補足を関連付ける
  • 画面端で切れない位置を計算する