# 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。 |