Hover card
Long-delay (700ms) rich preview card. Suited to hover previews for usernames, variables, requests, and other rich-info targets.
Basic usage
Wrap any trigger element; place the card body in the content slot. Delays and placement are configurable.
<CfHoverCard placement="bottom">
<span>@jane.l</span>
<template #content>…</template>
</CfHoverCard><CfHoverCard placement="bottom" trigger={<span>@jane.l</span>}>
…
</CfHoverCard>Four placements
top / bottom / left / right — placement is computed automatically. The demo here uses a 200ms short delay for ease of viewing.
topbottomleftright
<CfHoverCard placement="top">…</CfHoverCard><CfHoverCard placement="top" trigger={…}>…</CfHoverCard>API
| Prop | Type | Default | Description |
|---|---|---|---|
placement | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | Placement |
size | 'sm' | 'md' | 'lg' | 'md' | 220 / 280 / 360 px |
openDelay | number | 700 | Show delay in ms |
closeDelay | number | 200 | Hide delay in ms (avoids flicker) |
disabled | boolean | false |
反馈与讨论
Hover card · Discussion