Overlay

HoverCard

A preview card that appears on hover, suitable for showing user profiles, link previews, and supplementary information without interrupting user flow.

Installation

bash

pnpm dlx shadcn@latest add hover-card -c packages/react

Preview Link

tsx

import { HoverCard, HoverCardTrigger, HoverCardContent } from "@polyui/react/hover-card"
import { Button } from "@polyui/react/button"
export function HoverCardPreview() {
  return (
    <HoverCard>
      <HoverCardTrigger render={<Button variant="link" />}>@polyui</HoverCardTrigger>
      <HoverCardContent className="w-72">
        <div className="space-y-2">
          <div className="flex items-center gap-3">
            <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-sm">
              P
            </div>
            <div>
              <p className="text-sm font-semibold">PolyUI</p>
              <p className="text-xs text-muted-foreground">@polyui</p>
            </div>
          </div>
          <p className="text-sm text-muted-foreground">
            A beautifully designed, accessible component library for building modern UIs.
          </p>
          <p className="text-xs text-muted-foreground">Joined January 2024</p>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

Props

HoverCardContent

属性	类型	默认值	说明
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Side of the trigger to display the card.
`sideOffset`	`number`	`4`	Gap between card and trigger in pixels.
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment of the card.
`alignOffset`	`number`	`4`	Offset along the alignment axis in pixels.
`className`	`string`	`—`	Custom class name.