# Tooltip 文字提示

# Tooltip 概述

文字提示气泡框,在鼠标悬停时显示,代替了系统的 title 提示。

# Tooltip 代码示例

# 基础用法

最简单的用法。
注意 Tooltip 内的文本使用了 white-space: nowrap;,即不自动换行,如需展示很多内容并自动换行时,建议给内容 slot 增加样式 white-space: normal;。

# 位置

组件提供了 12 个不同的方向显示 Tooltip,具体配置可查看 API

# 自定义内容

通过自定义 slot 显示多行文本或更复杂的样式。

# 禁用

通过设置属性 disabled 可以禁用文字提示。提示框消失时触发 on-popper-hide 事件

# 延时

通过设置属性 delay 可以延时显示文字提示,单位毫秒。

# 总是可见

通过设置属性 always 文字提示一直显示。

# Tooltip API

# Tooltip props

属性 说明 类型 默认值
content 显示的内容 String | Number
placement 提示框出现的位置,可选值为top top-start top-end bottom bottom-start bottom-end left left-start left-end right right-start right-end String bottom
disabled 是否禁用提示框 Boolean false
delay 延迟显示,单位毫秒 Number 0
always 是否总是可见 Boolean false
transfer 是否将弹层放置于 body 内,在 Tabs、带有 fixed 的 Table 列内使用时,建议添加此属性,它将不受父级样式影响,从而达到更好的效果 Boolean false
imdiaClose 当鼠标移出触发体时立马关闭弹框,即鼠标移入弹框时不保持弹框显示(此属性只在 v1.0.21 及以上有效) Boolean false

# Tooltip events

事件名 说明 返回值
on-popper-hide 在提示框消失时触发(disbled 模式下也可以触发)

# Tooltip slot

名称 说明
主体内容
content 提示框的内容,定义此 slot 时,会覆盖 props content