Skip to content

FaHoverCard 悬浮卡片

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

使用场景

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

Props

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

Slots

名称说明
default触发元素(必填)
card悬浮卡片内容

注意事项

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