Tooltip 文字提示
简单的文字提示气泡,支持多个方向、触发方式、自定义颜色和箭头。
基础用法
鼠标悬停时显示提示文字。
不同方向
通过 placement 设置弹出方向,支持 12 个位置。
点击触发
设置 trigger 为 click,点击触发显示,再次点击或点击外部关闭。
自定义颜色
通过 color 设置背景色,textColor 设置文字颜色。
隐藏箭头
设置 arrow 为 false 隐藏箭头。
延迟显示
通过 show-delay 和 hide-delay 控制显示/隐藏的延迟时间(毫秒)。
带图标触发
结合 NIcon 组件作为触发元素。
禁用状态
设置 disabled 后不显示提示。
偏移距离
通过 offset 控制提示框与触发元素的距离,默认 8px。
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
placement | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'top' | 提示框出现的位置 |
trigger | 'hover' | 'click' | 'hover' | 触发方式 |
color | string | — | 背景颜色 |
textColor | string | — | 文字颜色 |
arrow | boolean | true | 是否显示箭头 |
disabled | boolean | false | 是否禁用 |
showDelay | number | 0 | 显示延迟(ms) |
hideDelay | number | 100 | 隐藏延迟(ms) |
offset | number | 8 | 与触发元素的间距(px) |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
show | () => void | 提示框显示时触发 |
hide | () => void | 提示框隐藏时触发 |
Slots
| 插槽名 | 说明 |
|---|---|
default | 提示内容 |
trigger | 触发元素 |