Tooltip 文字提示
鼠标悬浮时显示提示信息。
基础用法
Tooltip 有 9 个 placement。
主题
Tooltip 内置了两套主题：dark 和 light。
提示
要使用自定义主题，您需要知道您的 Tooltip 渲染到了哪个位置，如果您的 Tooltip 渲染到了根元素，您将需要全局设置 CSS 规则。
当您使用自定义主题并同时显示箭头时，建议不要使用线性渐变背景色，因为弹出箭头和内容是两个不同的元素，弹出箭头的样式需要单独设置，而当涉及到渐变背景色时，看起来可能会有点奇怪。
更多内容
显示多行文本并设置其格式。
高级用法
除了基本用法外，还有一些属性可以让你自定义自己的
transition 属性允许您自定义 Tooltip 显示或隐藏时的动画，默认值为 el-fade-in-linear。
disabled 属性可以让你禁用 tooltip。 你只需要把它设置为 true。
事实上，Tooltip 是基于 ElPopper 的扩展，你可以使用 ElPopper 中允许的任何属性。
提示
router-link 组件在 tooltip 中不受支持，请使用 vm.$router.push。
Tooltip 不支持禁用的表单元素，更多信息可以在 MDN 找到。 您需要将禁用的表单元素包裹在一个容器元素中，Tooltip 才能正常工作。
HTML 作为内容
content 属性可以设置为 HTML 字符串。
警告
虽然 `content` 属性支持 HTML 字符串，但在网站上动态渲染任意 HTML 可能非常危险，因为它很容易导致 XSS 攻击。因此，当 `raw-content` 开启时，请确保 `content` 是受信任的，并且**永远不要**分配用户提供的 `content`。
虚拟触发
有时我们想在其他一些触发元素上渲染 tooltip，我们可以将触发器和内容分开。
提示
虚拟触发 tooltip 是受控组件，因此在这种情况下您必须自己控制 tooltip 的可见性，您将**无法**通过单击其他地方来关闭 tooltip。
单例
Tooltip 也可以是单例的，这意味着您可以有多个触发器，但只有一个 tooltip 实例，这个功能是基于 `虚拟触发` 实现的
提示
已知问题：使用单例时，弹出窗口会从意想不到的地方弹出
受控
Tooltip 可以由父组件控制，通过使用 `:visible` 您可以实现双向绑定。
动画
Tooltip 可以自定义动画，您可以使用 `transition` 设置所需的动画。
提示
过渡类，更多信息可以在 Vue Transition 找到。
使用 `append-to`
在使用 `targetElement` 之前，您必须等待 DOM 挂载完毕。
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| append-to | tooltip 内容附加到哪个元素 | CSSSelector / HTMLElement | — |
| effect | Tooltip 的主题，内置主题：`dark` / `light` | 枚举 | 暗黑模式 |
| content | 显示内容，可通过 `slot#content` 覆盖 | string | '' |
| raw-content | content 是否被视为 HTML 字符串 | boolean | false |
| placement | Tooltip 的出现位置 | 枚举 | bottom |
| fallback-placements | Tooltip 的可能位置列表 popper.js | array | — |
| visible / v-model:visible | Tooltip 的可见性 | boolean | — |
| disabled | Tooltip 是否被禁用 | boolean | — |
| offset | Tooltip 的偏移量 | number | 12 |
| transition | 动画名称 | string | — |
| popper-options | popper.js 参数 | object请参考 popper.js 文档 | {} |
| arrow-offset 2.9.10 | 控制 tooltip 箭头的偏移（内边距），相对于 popper。 | number | 5 |
| show-after | 出现延迟，单位为毫秒，在受控模式下无效 | number | 0 |
| show-arrow | tooltip 内容是否有箭头 | boolean | true |
| hide-after | 消失延迟，单位为毫秒，在受控模式下无效 | number | 200 |
| auto-close | 隐藏 tooltip 的超时时间，单位为毫秒，在受控模式下无效 | number | 0 |
| popper-class | Tooltip 的 popper 的自定义类名 | string | — |
| popper-style | Tooltip 的 popper 的自定义样式 | string / object | — |
| enterable | 鼠标是否可以进入 tooltip | boolean | true |
| teleported | tooltip 内容是否被传送，如果为 `true`，它将被传送到 `append-to` 设置的位置 | boolean | true |
| trigger | tooltip 应该如何触发（显示），在受控模式下无效 | 枚举 / 对象 | 悬浮时 |
| virtual-triggering | 指示是否启用虚拟触发 | boolean | — |
| virtual-ref | 指示 tooltip 附加到的引用元素 | HTMLElement | — |
| trigger-keys | 当您单击鼠标聚焦于触发元素时，可以通过键盘定义一组键盘码来控制 tooltip 的显示，在受控模式下无效 | 数组 | ['Enter','Space'] |
| persistent | 当 tooltip 不活动且 `persistent` 为 `false` 时，tooltip 将被销毁 | boolean | — |
| aria-label 无障碍 | 与 `aria-label` 相同 | string | — |
| focus-on-target 2.11.2 | 通过悬停触发 tooltip 时，是否聚焦触发元素，这可以提高可访问性 | boolean | false |
事件
| 名称 | 描述 | 类型 |
|---|---|---|
| before-show | 在 tooltip 显示前触发。将触发原因作为参数传递。 | Function |
| show | 在 tooltip 显示时触发。将触发原因作为参数传递。 | Function |
| before-hide | 在 tooltip 隐藏前触发。将触发原因作为参数传递。 | Function |
| hide | 在 tooltip 隐藏时触发。将触发原因作为参数传递。 | Function |
插槽
| 名称 | 描述 |
|---|---|
| default | Tooltip 触发和引用元素，只接受单个根元素 |
| content | 自定义内容 |
暴露
| 名称 | 描述 | 类型 |
|---|---|---|
| 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 |
常见问题
当 tooltip 嵌套时如何允许输入框中输入空格？
典型问题： #20907
<template>
<el-tooltip content="tooltip content" placement="top" :trigger-keys="[]">
<el-input v-model="value" placeholder="" />
</el-tooltip>
</template>来源
贡献者
