Tooltip 文字提示 #

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

基础用法 #

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

主题 #

Tooltip 组件提供了两个不同的主题：dark和light。

更多内容的文字提示 #

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

高级扩展 #

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

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

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

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

显示 HTML 内容 #

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

虚拟触发 #

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

单例模式 #

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

受控模式 #

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

自定义动画 #

工具提示可以自定义动画，您可以按照自己的愿望设置所需的动画功能。

属性 #

| 属性 | 说明 | 类型 | 可选值 | 默认值 | | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ---------------------------------- | | append-to | 指示 Tooltip 的内容将附加在哪一个网页元素上 | CSSSelector \ | HTMLElement | — | #el-popper-container-[randomValue] | | effect | Tooltip 主题，内置了 dark / light 两种 | string | string | dark | | content | 显示的内容，也可被 slot#content 覆盖 | String | — | — | | raw-content | content 中的内容是否作为 HTML 字符串处理 | boolean | — | false | | placement | Tooltip 组件出现的位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom | | visible / v-model:visible | Tooltip 组件可见性 | boolean | — | false | | disabled | Tooltip 组件是否禁用 | boolean | — | false | | offset | 出现位置的偏移量 | number | — | 0 | | transition | 动画名称 | string | — | el-fade-in-linear | | visible-arrow (will deprecate in 2.1.0 ) | 是否显示箭头。 想了解更多信息，请查看 ElPopper 页面 | boolean | — | true | | popper-options | popper.js 参数 | Object | refer to popper.js doc | { boundariesElement: 'body', gpuAcceleration: false } | | show-after | 延迟出现，单位毫秒 | number | — | 0 | | show-arrow | tooltip 的内容是否有箭头 | boolean | true / false | true | | hide-after | 延迟关闭，单位毫秒 | number | — | 0 | | auto-close | tooltip 出现后自动隐藏延时，单位毫秒 | number | — | 0 | | manual | 是否手动控制 Tooltip。 如果设置为 true，mouseenter 和 mouseleave 将不会生效 | boolean | — | false | | popper-class | 为 Tooltip 的 popper 添加自定义类名 | string | — | — | | enterable | 鼠标是否可进入到 tooltip 中 | Boolean | — | true | | tabindex | Tooltip 的 tabindex | number | — | 0 | | teleported | 是否使用 teleport。设置成 true则会被追加到 append-to 的位置 | boolean | true / false | true | | trigger | 如何触发 tooltip (来显示) | string | hover / click / focus / contextmenu | hover | | virtual-triggering | 用来标识虚拟触发是否被启用 | boolean | — | false | | virtual-ref | 表明 tooltip 绑定到哪个 html 元素 | HTMLElement | — | — |

插槽 #