# 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/medium | medium | V2.5.1 |
| effect | 气泡风格 | String | dark/light/medium | medium | 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 | 显示时触发 | — |