Appearance
Tooltip 文字提示
轻量的提示浮层,支持多种触发方式与独特功能。
基础用法
触发方式
支持 hover、click、focus、contextmenu、longpress(移动端友好)。
位置与自动定位
通过 placement 指定位置,或使用 auto 自动选择最佳空间方位。
内可交互
设置 interactive 与 enterable,允许鼠标进入 Tooltip 区域进行操作。
跟随光标(独特)
设置 follow-cursor,提示将跟随指针移动,适合图标密集或数据点悬浮。
选区锚点(独特)
设置 anchor-selection,当存在文字选区时,Tooltip 自动锚定到选区范围。
主题(Glass / 渐变)
内置独特主题:glass 毛玻璃、gradient 渐变。
API
Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| content | 提示内容(支持字符串/VNode/渲染函数) | string / VNode / Function | — |
| trigger | 触发方式 | hover / click / focus / contextmenu / longpress | hover |
| placement | 位置 | top / right / bottom / left / auto | top |
| enterable | 鼠标进入 Tooltip 是否保持显示 | boolean | true |
| interactive | Tooltip 内部是否可交互 | boolean | false |
| open-delay | 打开延迟(毫秒) | number | 100 |
| close-delay | 关闭延迟(毫秒) | number | 100 |
| offset | 触发与浮层之间的距离(像素) | number | 10 |
| show-arrow | 是否显示箭头 | boolean | true |
| theme | 主题 | default / glass / gradient | default |
| follow-cursor | 是否跟随光标(独特) | boolean | false |
| anchor-selection | 是否锚定到文字选区(独特) | boolean | false |
| max-width | 内容最大宽度 | string / number | 260px |
| persist | 是否外部点击不关闭 | boolean | false |
| disabled | 是否禁用 | boolean | false |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| visible-change | 显隐变化时触发 | (visible: boolean) |