# Tooltip 文字提示

鼠标悬停在一个 UI 元素(如按钮、图标、文字等)上时,在元素周围弹出的简单文字提示,用于展示该元素的辅助信息。鼠标移入元素后文字提示显示,移出后文字提示消失。

# 属性对比(只显示有差异的)

参数 WinDesign Element-ui
effect
默认值: light
默认值: dark
content
说明: 可通过slot传入
说明: 可通过slot#content传入
placement
默认值: bottom-start
默认值: bottom
value / v-model
popper-options
close-delay
manual
tabindex
width
max-width
Events WinDesign Element-ui
hidden
show

# 代码演示

🎉 Features

V2.3.9 新增属性 max-height 可以设置最大高度,结合 width 和 max-width 属性,让内容超出区域以滚动方式查看。

⚠️⚠️⚠️

使用 tooltip 时, 一定要为触发元素设置 slot="reference", 否则无法生效。

# API

# Attributes

参数 说明 类型 可选值 默认值 Version
content 显示的内容 String
disabled 是否禁用 Popover Boolean false
offset 出现位置 x 轴方向上的偏移量 Number
popper-class 为 popper 添加类名 String
placement 出现位置 String 'top' | 'right' | 'bottom' | 'left' 及各方向的修饰符(-start, -end) 'bottom-start'
theme 气泡风格 String dark/light light
effect 气泡风格 String dark/light light V2.2.5
visible-arrow 是否显示 popover 的箭头 Boolean true
width 气泡的宽度(普通 width 属性的合法值) String v1.7.7
max-width 气泡的最大宽度(普通 max-width 属性的合法值) String v1.7.7
max-height 气泡的最大高度(普通 max-height 属性的合法值) String v2.3.9
close-delay 气泡关闭延迟(单位 ms) Number 200 v2.0.0
open-delay 气泡打开延迟(单位 ms) Number 0 v2.0.0
enterable 鼠标是否可进入到 tooltip 中 Boolean true v2.0.0
hide-after Tooltip 出现后自动隐藏延时, 为 0 时不会自动隐藏(单位 ms) Number 0 v2.0.0
transition 定义渐变动画 String fade-in-linear V2.2.5
ellipsis 是否开启在父宽度不够承载内容时使触发 Dom 以省略号显示 Boolean false V2.3.6
reference-width 触发 Dom 的宽度(普通 width 属性的合法值) String V2.3.6

# Slot

参数 说明 Version
reference tooltip 触发 dom

# Popper Methods

事件名称 说明 回调参数 Version
updatePopper 更新 popper(当相对定位元素发生位置或宽高变化时,需要更新 popper 的位置时调用)

# Events

事件名称 说明 回调参数 Version
hidden 隐藏时触发
show 显示时触发
上次更新: 4/17/2024, 5:12:42 PM