Hover Card

Preview rich content behind a link when sighted users hover it.

OverlaysRadix Hover Card

Reviewed by @maya two hours ago.

Playground

Tweak the props, the preview and the code follow.

@plumsy

Props

side

openDelay250

closeDelay150

showArrow

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="#">@plumsy</a>
  </HoverCardTrigger>
  <HoverCardContent>
    …
  </HoverCardContent>
</HoverCard>

Installation

npx @plumsydev/plum-ui add hover-card

Usage

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"

<HoverCard>
  <HoverCardTrigger>@maya</HoverCardTrigger>
  <HoverCardContent>Design engineer at Acme.</HoverCardContent>
</HoverCard>

Examples

Link preview

acme/design-system

Mentions

Inline @mentions with rich previews and an arrow.

@Léa pushed the new tokens. @Alex can you check the dark mode borders before @Sam sends the changelog?

API Reference

Prop	Type	Default
`openDelay` Delay before opening, in ms.	`number`	`250`
`closeDelay` Delay before closing, in ms.	`number`	`150`

HoverCardContent

Prop	Type	Default
`side` Preferred side.	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`
`align` Alignment against the trigger.	`"start" \| "center" \| "end"`	`"center"`
`showArrow` Adds an arrow that points at the trigger, with the border wrapped around it.	`boolean`	`false`

Notes

Hover cards are ignored by keyboard and touch users — only use them for supplementary content.

PreviousFile Upload NextInput