Tooltip 文字提示

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

TIP

在 SSR 场景下，您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress).

基础用法

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

Tooltip 组件内置了两个主题：dark和light。

TIP

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

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

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

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

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

TIP

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

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

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

WARNING

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

名称	说明	类型	可选值	默认值
append-to	指示 Tooltip 的内容将附加在哪一个网页元素上	`CSS 选择器 \| HTMLElement`	—	#el-popper-container-[randomValue]
effect	Tooltip 主题，内置了 `dark` / `light` 两种	string	dark / light	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

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