Hover Card

For sighted users to preview content available behind a link. Opens after hovering 700 ms (mouse / touchpad) and stays open while the pointer is over the card; on touch, a tap toggles it.

Usage

SHoverCard() {
  SHoverCardTrigger() { SButton({ text: '@nextjs', variant: 'link' }) }
  SHoverCardContent() {
    Row({ space: 16 }) {
      SAvatar({ fallback: 'VC' })
      Column({ space: 4 }) {
        Text('@nextjs')
        Text('The React Framework – created and maintained by @vercel.')
        Text('Joined December 2021')
      }
    }
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SHoverCard

shadcn-vue HoverCard: preview content behind a link.

• pointer: opens after hovering the trigger for openDelay ms, closes closeDelay ms after the pointer leaves both the trigger and the card (moving onto the card keeps it open)
• touch: tapping the trigger toggles it (tap outside closes), like a Popover

Prop	Type	Default	Description
openDelay	number	700
closeDelay	number	300
open!!	boolean | undefined	undefined
defaultOpen	boolean	false

Event	Type	Default	Description
onOpenChange	(open: boolean) => void	() => { }

Slots: children (trailing closure)

SHoverCardTrigger

Hover (pointer) or tap (touch) target; its bounds are the anchor.

Slots: children (trailing closure)

SHoverCardContent

Anchored card: bg-popover w-64 rounded-md border p-4 shadow-md.

Prop	Type	Default	Description
side	SparkSide SparkSide = 'top' | 'right' | 'bottom' | 'left'	'bottom'
alignment	SparkAlign SparkAlign = 'start' | 'center' | 'end'	'center'
sideOffset	number	4
panelWidth	number	256	card width in vp (shadcn w-64 = 256)

Slots: children (trailing closure)