HelpButton

ラベルの横に配置する「?」ボタン。クリックで詳細説明の popover が開きます。outside click / ESC キーで閉じ、Portal でレンダリングされるためスクロールや z-index の影響を受けません。Tooltip（ホバー起動・一時表示）と異なり、クリックで開閉する永続モードを提供します。

GitHub でソースを見る

プレビュー

AI系リファラル数CVR

使いどころ

使う場面

  • フォームのラベルの横など、読みたい人だけが開く短い補足（用語の説明、入力のルール）
  • title と本文（children）で、数行の説明を出す
  • position で出る向き、size で幅（sm / md / lg）を決める

使わない場面

  • 読まないと操作を間違える情報。画面上に常に表示する
  • リンクやボタン、入力欄を含む内容。Popover を使う
  • アイコンボタンの名前だけを補う。Tooltip を使う
  • 長い説明や手順。別ページか Disclosure で見せる

使い方

<HelpButton title="AI系リファラルの判定ロジック">
  <p>GA4 の sessionSource に以下のドメインが含まれる場合...</p>
  <ul>
    <li>chatgpt.com</li>
    <li>perplexity.ai</li>
  </ul>
</HelpButton>

プロパティ

名前型デフォルト説明
titlestringなしpopover 上部に表示するタイトル
children必須ReactNodeなしpopover の本文（文字列・JSX どちらも可）
position"top" | "bottom" | "left" | "right""bottom"popover の表示位置
size"sm" | "md" | "lg""md"popover の最大幅（sm: 220px, md: 300px, lg: 420px）
iconReactNode"?"トリガーボタンに表示するアイコン
ariaLabelstring"ヘルプ"トリガーボタンの aria-label
classNamestringなしルート要素に足すクラス

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

キーボード操作

キー動作
Tabヘルプボタンにフォーカスを移す
Enter / Space説明を開閉する
Escape説明を閉じて、ヘルプボタンにフォーカスを戻す

アクセシビリティ

  • ボタンの名前は ariaLabel（既定「ヘルプ」）。同じ画面に複数あるときは「パスワードのヘルプ」のように何のヘルプかを入れる
  • aria-expanded が付き、開いた説明は role="dialog"（aria-modal="false"）。開いてもフォーカスは説明には移らない
  • 説明は DOM の末尾に出るので、Tab で説明の中に入りにくい。リンクなど操作できる中身は入れない
  • 外をクリックすると閉じる

文言

  • title は何についての説明かを名詞で書く（「ワークスペース名とは」）
  • 本文は 2〜3 文まで。結論から書く

関連するコンポーネント