Popover

ボタンやリンクに紐付いて表示される小さなパネル。日付ピッカー・カラーピッカー・フィルターパネルなど、トリガー近くに補助UIを表示するときに使う。

インストール

npx shoji add popover

プレビュー

配置

使用例

ページ遷移なしで補助情報・設定フォームを表示したいときに使う。 フォーカスを奪わず、クリック外しで閉じるため、メインコンテンツの流れを邪魔しない。

パターン

Filter

チェックボックス群 + 適用 / クリアボタンのフィルターパネル。テーブル・一覧のカラムフィルターとして使う。

popover
filtertableSaaS

Mini Form

ラベル名変更・タグ追加など、小さな編集フォームをポップオーバーで表示するパターン。インライン編集の代替。

popover
editinline

使い方

こんなときに使う

  • 日付選択・カラー選択など、入力フィールドに紐付くUI
  • フィルター・ソートオプションなど、設定の詳細パネル
  • ツールチップより多くの情報・インタラクションが必要なとき

使わないほうがいい場面

  • 単純な1行の説明（Tooltip で十分）
  • モバイルでの多用（画面の端で表示が切れやすい）

JP 最適化のポイント

  • 日本語のポップオーバーコンテンツは英語より長くなりがち — 最小幅（min-w-72 程度）を設定して内容が窮屈にならないようにする