Tooltip

アイコンボタンや省略されたテキストにカーソルを合わせたときに、補足説明を表示する小さなラベル。操作の意味が分かりにくいUIに補足情報を添えるときに使う。

インストール

npx shoji add tooltip

プレビュー

使用例

パターン

Keyboard Shortcut

ラベル + キーボードショートカット（⌘K・Ctrl+S など）を並べるパターン。ツールバーのアイコンボタン・コマンドメニューの説明に使う。

tooltip
shortcutkeyboard

使い方

こんなときに使う

  • ラベルのないアイコンボタン（必ず aria-label も付ける）
  • 省略されたテキストの全文表示
  • キーボードショートカットの表示

使わないほうがいい場面

  • 必須の情報を Tooltip にだけ入れる（タッチデバイスではホバーできない）
  • 長い文章（3文以上）を Tooltip で表示する
  • モバイル専用UIに Tooltip を使う

JP 最適化のポイント

  • 日本語のツールチップは英語より文字数が少なくても幅が必要 — min-w を設定して1〜2語が詰まって見えないようにする
  • タッチデバイスでホバーはできない — Tooltip 内の情報はあくまで補足とし、必須情報は常時表示する