Tooltip 文字提示

常用于展示鼠标 hover 时的提示信息。

基础用法

在这里我们提供 9 种不同方向的展示方式,可以通过以下完整示例来理解,选择你要的效果。

主题

Tooltip 组件内置了两个主题:darklight

TIP

要使用自定义主题,您必须知道您的工具提示在哪里渲染, 如果您的工具提示被呈现为根元素,您将需要全局设置css规则。

建议您使用自定义主题并同时显示箭头时不使用线性渐变背景颜色。 因为弹出箭头和内容是两个不同的元素, 弹出箭头的样式需要单独设置, 当它到渐变背景颜色时,会看起来很奇怪。

更多内容的文字提示

展示多行文本或者是设置文本内容的格式

高级扩展

除了这些基本设置外,还有一些属性可以让使用者更好的定制自己的效果:

transition 属性可以定制显隐的动画效果,默认为fade-in-linear

如果需要关闭 tooltip 功能,disabled 属性可以满足这个需求, 你只需要将其设置为 true

事实上,Tooltip 是一个基于 ElPopper 的扩展,您可以使用 ElPopper 中允许的任何属性。

TIP

Tooltip 内不支持 router-link 组件,请使用 vm.$router.push 代替。

tooltip 内不支持 disabled form 元素,参考 MDN, 请在 disabled form 元素外层添加一层包裹元素。

显示 HTML 内容

内容属性可以设置为 HTML 字符串。

WARNING

content 属性虽然支持传入 HTML 片段,但是在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。 因此在 raw-content 打开的情况下,请确保 content 的内容是可信的,永远不要将用户提交的内容赋值给 content 属性。

虚拟触发

有时候我们想把 tooltip 的触发元素放在别的地方,而不需要写在一起,这时候就可以使用虚拟触发。

TIP

需要注意的是,虚拟触发的 tooltip 是受控组件,因此你必须自己去控制 tooltip 是否显示,你将无法通过点击空白处来关闭 tooltip。

单例模式

Tooltip 可以作为单例,也就是是说你可以同时有多个触发同一个 tooltip 的触发元素,这个功能是在 虚拟触发 的基础上开发的。

TIP

已知问题:当使用单例模式时,tooltip 的触发元素发生改变的时候可能会发生弹跳。

受控模式

Tooltip 可以通过父组件使用 :visible 来控制它的显示与关闭。

自定义动画

Tooltip 可以自定义动画,你可以根据需要自行设置所需的动画方法。

属性

名称说明类型可选值默认值
append-to指示 Tooltip 的内容将附加在哪一个网页元素上CSS 选择器 | HTMLElement#el-popper-container-[randomValue]
effectTooltip 主题,内置了 dark / light 两种stringdark / lightdark
content显示的内容,也可被 slot#content 覆盖String
raw-contentcontent 中的内容是否作为 HTML 字符串处理booleanfalse
placementTooltip 组件出现的位置stringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endbottom
visible / v-model:visibleTooltip 组件可见性booleanfalse
disabledTooltip 组件是否禁用booleanfalse
offset出现位置的偏移量number0
transition动画名称stringel-fade-in-linear
popper-optionspopper.js 参数Object详见 popper.js 文档{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}
show-after在触发后多久显示内容,单位毫秒number0
show-arrowtooltip 的内容是否有箭头booleantrue / falsetrue
hide-after延迟关闭,单位毫秒number200
auto-closetooltip 出现后自动隐藏延时,单位毫秒number0
manual是否手动控制 Tooltip。 如果设置为 true,则 mouseentermouseleave 将不会生效booleanfalse
popper-class为 Tooltip 的 popper 添加类名string
enterable鼠标是否可进入到 tooltip 中Booleantrue
tabindexTooltip 的 tabindexnumber0
teleported是否使用 teleport。设置成 true则会被追加到 append-to 的位置booleantrue / falsetrue
trigger如何触发(展示) Tooltipstringhover / click / focus / contextmenuhover
virtual-triggering指示是否启用虚拟触发器booleanfalse
virtual-ref代表 tooltip 所要附加的参照元素HTMLElement
trigger-keys当鼠标点击或者聚焦在触发元素上时, 可以定义一组键盘按键并且通过它们来控制 Tooltip 的显示Array['Enter','Space']

插槽

插槽名说明
Tooltip 触发 & 引用的元素
content自定义内容

源代码

组件文档

贡献者