Tooltip 文字提示

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

基础用法

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

使用 content 属性来决定 hover 时的提示信息。 由 placement 属性决定展示效果: placement属性值为:[方向]-[对齐位置];四个方向:topleftrightbottom;三种对齐位置:start, end,默认为空。 如 placement="left-end",则提示信息出现在目标元素的左侧,且提示信息的底部与目标元素的底部对齐。

主题

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

TIP

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

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

通过设置 effect 来修改主题,默认值为 dark.

更多内容的文字提示

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

用具名 slot content,替代tooltip中的content属性。

高级扩展

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

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 可以通过父组件使用 :visible 来控制它的显示与关闭。

自定义动画

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

API

Attributes

名称 说明 类型 默认值
append-to 指示 Tooltip 的内容将附加在哪一个网页元素上 CSSSelector / HTMLElement
effect Tooltip 主题,内置了 dark / light 两种 enum dark
content 显示的内容,也可被 slot#content 覆盖 string ''
raw-content content 中的内容是否作为 HTML 字符串处理 boolean false
placement Tooltip 组件出现的位置 enum bottom
fallback-placements Tooltip 可用的 positions 请查看popper.js 文档 array
visible / v-model:visible Tooltip 组件可见性 boolean
disabled Tooltip 组件是否禁用 boolean
offset 出现位置的偏移量 number 12
transition 动画名称 string
popper-options popper.js 参数 object 请参考 popper.js 文档 {}
show-after 在触发后多久显示内容,单位毫秒 number 0
show-arrow tooltip 的内容是否有箭头 boolean true
hide-after 延迟关闭,单位毫秒 number 200
auto-close tooltip 出现后自动隐藏延时,单位毫秒 number 0
popper-class 为 Tooltip 的 popper 添加类名 string
enterable 鼠标是否可进入到 tooltip 中 boolean true
teleported 是否使用 teleport。设置成 true则会被追加到 append-to 的位置 boolean true
trigger 如何触发 Tooltip enum hover
virtual-triggering 用来标识虚拟触发是否被启用 boolean
virtual-ref 标识虚拟触发时的触发元素 HTMLElement
trigger-keys 当鼠标点击或者聚焦在触发元素上时, 可以定义一组键盘按键并且通过它们来控制 Tooltip 的显示 Array ['Enter','Space']
persistent 当 tooltip 组件长时间不触发且 persistent 属性设置为 false 时, popconfirm 将会被删除 boolean
aria-label a11y aria-label 属性保持一致 string

Slots

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

Exposes

名称 详情 类型
popperRef el-popper 组件实例 object
contentRef el-tooltip-content 组件实例 object
isFocusInsideContent 验证当前焦点事件是否在 el-tooltip-content 中触发 Function
updatePopper 更新 el-popper组件实例 Function
onOpen onOpen 方法控制 el-tooltip 显示状态 Function
onClose onClose 方法控制 el-tooltip 显示状态 Function
hide 提供 hide 方法 Function

源代码

组件 样式 文档

贡献者