Poptip 气泡提示

Poptip 概述

Poptip 与 Tooltip 类似，具有很多相同配置，不同点是 Poptip 以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
Poptip 还 confirm 确认框，与 Modal 不同的是，它会出现在就近元素，相对轻量。

Poptip 代码示例

基础用法

支持三种触发方式：鼠标悬停、点击、聚焦。默认是点击。
注意 Poptip 内的文本使用了 white-space: nowrap;，即不自动换行，如需展示很多内容并自动换行时，建议给内容 slot 增加样式 white-space: normal;。

位置

组件提供了 12 个不同的方向显示 Poptip，具体配置可查看API。

从浮层内关闭

通过 v-model 来控制提示框的显示和隐藏。

嵌套复杂内容

通过自定义 slot 来实现复杂的内容。

确认框

通过设置属性 confirm 开启确认框模式。确认框只会以 click 的形式激活，并且只会显示 title 的内容，忽略 content。

Poptip API

Poptip props

属性	说明	类型	默认值
trigger	触发方式，可选值为 hover（悬停）click（点击）focus（聚焦）,在 confirm 模式下，只有 click 有效	String	click
title	显示的标题	String | Number	-
content	显示的正文内容，只在非 confirm 模式下有效	String | Number	空
placement	提示框出现的位置，可选值为top top-start top-end bottom bottom-start bottom-end left left-start left-end right right-start right-end	String	top
width	宽度，最小宽度为 150px，在 confirm 模式下，默认最大宽度为 300px	String | Number	-
confirm	是否开启对话框模式	Boolean	false
ok-text	确定按钮的文字，只在 confirm 模式下有效	String	确定
cancel-text	取消按钮的文字，只在 confirm 模式下有效	String	取消
transfer	是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果	Boolean	false
closeOutClick	禁用点击外部关闭弹框的功能（此属性只在1.0.14或以上版本有效）	Boolean	false
notResponding	禁用默认弹框的响应功能（v1.0.31）	Boolean	false
isNotCache	设置content文本内容是否每次展开时，重新渲染（v1.0.65） false: 表示渲染的内容通过v-show来控制 true: 表示内容通过v-if来控制,每次点击都要重新渲染内容	Boolean	false

Poptip events

事件名	说明	返回值
on-popper-hide	在提示框消失时触发	无
on-ok	点击确定的回调，只在 confirm 模式下有效	无
on-cancel	点击取消的回调，只在 confirm 模式下有效	无

Poptip slot

名称	说明
无	主体内容
title	提示框标题，定义此 slot 时，会覆盖 props title
content	提示框内容，定义此 slot 时，会覆盖 props content，只在非 confirm 模式下有效