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