ホバーカード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>
  );
}

使用コンポーネント

AvatarButton

関連コンポーネント

TooltipPopover

設計の判断（UIXHERO）

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

UIコンポーネント: HoverCard