---
url: /components/basic/FaHoverCard.md
---
# FaHoverCard 悬浮卡片

鼠标悬停时显示的卡片，用于展示额外信息。

## 使用场景

* 用户信息预览
* 链接/引用预览
* 术语解释
* 图片放大预览
* 日期/时间详情
* 标签详情

## Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `align` | `'start' \| 'end' \| 'center'` | `'center'` | 水平对齐方式 |
| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` | 弹出方向 |
| `sideOffset` | `number` | `4` | 与触发元素的偏移距离 |
| `alignOffset` | `number` | `0` | 对齐偏移量 |
| `collisionPadding` | `number` | `0` | 与视口边缘的碰撞内边距 |
| `class` | `HTMLAttributes['class']` | - | 卡片 CSS 类 |

## Slots

| 名称 | 说明 |
|------|------|
| `default` | 触发元素（必填） |
| `card` | 悬浮卡片内容 |

## 注意事项

1. **触发元素**：必须提供 `default` slot 作为触发元素
2. **自动延迟**：默认有短暂的延迟才显示，避免鼠标划过时误触发
3. **自动定位**：组件会自动调整位置避免超出视口
4. **内容宽度**：卡片内容建议设置合适的宽度