111k
新建

Hover Card

PreviousNext

让可见用户在链接后方预览内容。

Radix UIBase UI
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

安装

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>

触发延迟

在触发器上使用 delay 和 closeDelay 来控制卡片何时打开和关闭。

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

定位

使用 HoverCardContent 上的 side 和 align 属性来控制位置。

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

示例

基础

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

侧边

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

RTL

要在 shadcn/ui 中启用 RTL 支持，请参见 RTL 配置指南。

"use client"

import { Button } from "@/examples/base/ui-rtl/button"

API 参考

更多信息请参见 Base UI 文档。