125k

Hover Card

PreviousNext

晴眼者は、リンクの背後にあるコンテンツをプレビューできます。

BaseRadixReact Aria
import { Button } from "@/components/ui/radix/button"
import {
  HoverCard,

インストール

pnpm dlx shadcn@latest add hover-card

使い方

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

構成

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

HoverCard
├── HoverCardTrigger
└── HoverCardContent

トリガー遅延

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

<HoverCard openDelay={100} closeDelay={200}>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>Content</HoverCardContent>
</HoverCard>

位置

HoverCardContent の side および align プロパティを使用して配置を制御します。

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent side="top" align="start">
    Content
  </HoverCardContent>
</HoverCard>

基本

import { Button } from "@/components/ui/radix/button"
import {
  HoverCard,

サイド

import { Button } from "@/components/ui/radix/button"
import {
  HoverCard,

RTL

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

"use client"

import {

API リファレンス

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