HoverCard
リンクやアバターにカーソルを合わせたとき、詳細情報をカードで表示するコンポーネント。クリックせずにプレビューを提供する。
インストール
npx shoji add hover-card
プレビュー
使い方
こんなときに使う
- ユーザー名へのホバーでプロフィールカードを表示
- 商品名・記事タイトルへのホバーでプレビュー表示
- 用語・略語へのホバーで説明を表示
使わないほうがいい場面
- タッチデバイス専用のUIに使う（ホバーが発生しないため）
- 必須の操作を HoverCard 内に配置する
JP 最適化のポイント
- 日本語のプロフィールカードは氏名・肩書・所属を表示することが多く、英語より縦に長くなりやすい — max-w を広めに設定する