ホバーカードHoverCardExperimental

リンク先の内容をプレビュー表示するカードです。

プレビュー

状態とバリエーション

プロフィール概要

リンク先に移動する前に、人物やチームの概要を確認する例です。

補足サマリー

通知数やステータスなど、短い補足情報の表示にも使えます。

アクションボタン付き

人物や担当者の概要に、フォローや連絡などの軽い操作を添える例です。

タブ付きカード

1枚のホバーカード内で、概要・変更・注意点のように短い情報を切り替えます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
openboolean-開閉状態を外部で制御します。
openDelaynumber700トリガーに入ってから開くまでの遅延時間です。
closeDelaynumber300トリガーから離れてから閉じるまでの遅延時間です。
portalContainerHTMLElement | null-プレビュー枠や疑似ブラウザ内に閉じ込めたい場合のポータル先です。

使い方

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
  Button,
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@gunjo/ui";
import { IconCalendarEvent as CalendarDays } from "@tabler/icons-react";

export function ProfileHoverCard() {
  return (
    <HoverCard openDelay={150}>
      <HoverCardTrigger asChild>
        <Button variant="link" className="px-0">@gunjo_design</Button>
      </HoverCardTrigger>
      <HoverCardContent sideOffset={8} className="w-80 items-start text-left">
        <div className="flex gap-4">
          <Avatar>
            <AvatarImage src="/samples/avatar-aoi.svg" alt="" />
            <AvatarFallback>GU</AvatarFallback>
          </Avatar>
          <div className="min-w-0 space-y-1">
            <p className="text-sm font-semibold">Gunjo Design</p>
            <p className="text-sm text-muted-foreground">
              Gunjo UI のコンポーネント、トークン、パターンを管理するチームです。
            </p>
            <p className="flex items-center gap-2 pt-2 text-xs text-muted-foreground">
              <CalendarDays className="h-4 w-4" />
              2026年5月に更新
            </p>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

設計の判断

  • 遅れの既定は Radix のまま、画面ごとに決める。HoverCard は Radix の同名の部品の薄い包みです。開くまで700ms・閉じるまで300msという既定は Radix のもので、こちらでは変えていません。資料は開くまで300から500msを勧めています。このページの見本は確かめやすいように openDelay を150msにしているので、実際の画面では資料の値を目安に渡してください。
  • カードの上に移っても閉じない、は土台が持つ。カードに向けてカーソルを動かしているあいだに閉じてしまうと、中のボタンが押せません。この待ち時間と、焦点が当たったときにも開くこと（キーボードで使えること）は Radix の HoverCard が持っています。
  • 枠の中に閉じ込められるようにする。portalContainer を渡すと、カードを指定した箱の中に描きます。プレビューの枠や、画面の中に画面を描いている場面で、カードだけが外に出るのを防ぎます。中身の幅は256pxで固定しています。

使用コンポーネント

AvatarButton

関連コンポーネント

TooltipPopover

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: HoverCard