125k

Hover Card

PreviousNext

ホバー、フォーカス、または長押しすると表示されるポップオーバーで、リンクの背後にある利用可能なコンテンツをプレビューします。

BaseRadixReact Aria
"use client"

import { Button } from "@/components/ui/aria/button"

インストール

pnpm dlx shadcn@latest add hover-card

使い方

import { HoverCard, HoverCardTrigger } from "@/components/ui/hover-card"
<HoverCardTrigger>
  <Button variant="link">Hover</Button>
  <HoverCard>
    The React Framework – created and maintained by @vercel.
  </HoverCard>
</HoverCardTrigger>

構成

次の構成を使用して HoverCard を構築します。

HoverCardTrigger
├── Button
└── HoverCard

トリガー遅延

HoverCardTrigger で delay および closeDelay を使用して、カードが開閉するタイミングを制御します。

<HoverCardTrigger delay={100} closeDelay={200}>
  <Button variant="link">Hover</Button>
  <HoverCard>Content</HoverCard>
</HoverCardTrigger>

位置

HoverCard の placement プロップを使用して配置を制御します。

<HoverCardTrigger>
  <Button variant="link">Hover</Button>
  <HoverCard placement="top">Content</HoverCard>
</HoverCardTrigger>

基本

"use client"

import { Button } from "@/components/ui/aria/button"

サイド

"use client"

import { Button } from "@/components/ui/aria/button"

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

"use client"

import {

API リファレンス

詳細については、React Aria ドキュメントを参照してください。