点击某个组件时，弹出的气泡式的卡片浮层。可以对卡片上的元素进行操作。
基本使用
点击组件，弹出气泡，可对浮层上元素进行操作，承载复杂内容和操作。
设置 content 属性添加文本。
html
<iui-popover content="This is a popover">
<iui-button inline>Popover Trigger</iui-button>
</iui-popover><iui-popover content="This is a popover">
<iui-button inline>Popover Trigger</iui-button>
</iui-popover>弹出位置
Popover 支持 6 个不同的方位，分别为：左上、上、右上、左下、下、右下。
html
<!-- 左上 -->
<iui-popover content="This is a popover on top left" position="tl">
<iui-button inline style="width: 120px">Top left</iui-button>
</iui-popover>
<!-- 右上 -->
<iui-popover content="This is a popover on top right" position="tr">
<iui-button inline style="width: 120px">Top right</iui-button>
</iui-popover><!-- 左上 -->
<iui-popover content="This is a popover on top left" position="tl">
<iui-button inline style="width: 120px">Top left</iui-button>
</iui-popover>
<!-- 右上 -->
<iui-popover content="This is a popover on top right" position="tr">
<iui-button inline style="width: 120px">Top right</iui-button>
</iui-popover>防止遮挡
当 Popover 的弹出位置超出屏幕时，会自动调整弹出位置，使其不被遮挡。
当前效果在 PC 端预览可能有误，请以实机效果为准
自定义内容
有时候我们需要在 Popover 中放置复杂的内容，可以通过 content 插槽进行自定义。
html
<!-- 在弹出内容右侧添加 Action 按钮 -->
<iui-popover>
<iui-button inline>Top center</iui-button>
<template #content>
<view
:style="{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}"
>
<view>This is a single line of text with an action button</view>
<iui-button inline size="small">Action</iui-button>
</view>
</template>
</iui-popover><!-- 在弹出内容右侧添加 Action 按钮 -->
<iui-popover>
<iui-button inline>Top center</iui-button>
<template #content>
<view
:style="{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}"
>
<view>This is a single line of text with an action button</view>
<iui-button inline size="small">Action</iui-button>
</view>
</template>
</iui-popover>API
<Popover>props<Popover>events<Popover>slots