Skip to content

Popover 气泡卡片

气泡卡片是一个简洁的浮层,用于展示提示信息或其他内容。

基本用法

最简单的用法,通过content属性来指定显示的内容, 使用title属性来指定标题。position属性来指定气泡卡片的位置, 包括top, bottom, left, right。当空间不足时,气泡卡片会自动调整位置,比如当气泡卡片显示在顶部时但是空间不足的时候,会自动调整为显示在底部。

触发方式

通过trigger属性来指定气泡卡片的触发方式, 包括hover, click。默认是hover。当使用click时点击目标元素会显示气泡卡片,点击其它元素会隐藏气泡卡片。

自定义内容

可以通过content属性来指定气泡卡片的内容, 也可以通过content插槽来自定义内容。

延迟显示

通过delay属性来指定气泡卡片的显示延迟时间, 单位为毫秒。仅当triggerhover时有效。默认是300