Popover 弹出气泡

点击/鼠标移入元素，弹出气泡式的卡片浮层。在内容周围弹出一些隐藏的信息。和 Tooltip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。

引用

import { Popover, regist } from "litos-ui";

regist(Popover);

演示

基础用法

最简单的用法，通过 content 传递浮层内容。inline 属性表明 l-popover 标签是行级元素。

触发方式

四种触发方式：鼠标移入[hover]、点击[click]、焦点[focus]；通过 trigger 属性设置触发方式。默认为：hover；

位置

有 12 个弹出位置。通过 placement 属性设置弹出位置。

不显示箭头

通过传递 show-arrow 为 false 来取消箭头显示

自定义内容

通过 slot 插槽来设置 l-popover 的内容

l-popover 组件整体是一个相对定位的标签，所以如果需要对 l-popover 设置定位的话，需要在外围包裹一个 div 标签，然后对 div 标签设置定位。

Tooltip

tooltip 相对于 popover 只是样式进行了小调整；只需要设置 theme="tooltip" 属性就能即可。

API

Popover Attibutes

参数	说明	类型	默认值
inline	l-popover 是否是行级元素	boolean	false
content	l-popover 的内容	string	-
placement	位置	string	top
trigger	触发方式	hover、click、focus	hover
offset	偏移量	number	10
show-arrow	是否显示箭头	boolean	true
disabled	是否禁用	boolean	false
width	宽度	string、number	-
destroy-on-hide	隐藏时销毁 DOM 结构; false 隐藏时未销毁只是设置 display: none	boolean	false

Popover Slots

名称	说明
default	内容
trigger	触发按钮

Popover CSS Variables

变量名	说明	默认值
--l-popover-offset	偏移量	10px