Tooltip 文字提示
常用于展示鼠标 hover 时的提示信息。
何时使用
- 鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作
- 可用来代替系统默认的 title 提示，提供一个更好的用户体验
- 当某个页面元素需要解释或描述时
基本用法
最简单的用法，浮层的大小由内容区域决定。
位置
共有 12 个方向。
主题
Tooltip 组件内置了两个主题：dark 和 light。
更多内容
展示多行文本或者是设置文本内容的格式。
触发方式
鼠标悬停、聚焦、点击。
延迟
鼠标移入后延迟出现的时间，单位毫秒。
禁用
Tooltip 可以被禁用。
手动控制
通过设置 visible 属性来手动控制提示的显示。
API
Tooltip Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| content | 显示的内容，也可以通过 slot#content 传入 | string | — | — |
| placement | Tooltip 的出现位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| effect | 默认提供的主题 | string | dark/light | dark |
| visible / v-model:visible | 状态是否可见 | boolean | — | false |
| disabled | Tooltip 是否可用 | boolean | — | false |
| offset | 出现位置的偏移量 | number | — | 8 |
| show-after | 延迟出现，单位毫秒 | number | — | 0 |
| hide-after | 延迟关闭，单位毫秒 | number | — | 200 |
| show-arrow | 是否显示 Tooltip 箭头 | boolean | — | true |
| popper-class | 为 Tooltip 的 popper 添加类名 | string | — | — |
| enterable | 鼠标是否可进入到 tooltip 中 | boolean | — | true |
| raw-content | 是否将 content 作为 HTML 字符串处理 | boolean | — | false |
| trigger | 触发方式 | string | hover/focus/click/manual | hover |
| aria-label | 屏幕阅读器标签 | string | — | — |
Tooltip Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| before-show | 显示前触发 | — |
| show | 显示时触发 | — |
| before-hide | 隐藏前触发 | — |
| hide | 隐藏时触发 | — |
Tooltip Slots
| 插槽名 | 说明 |
|---|---|
| default | Tooltip 触发 & 引用的元素 |
| content | 自定义内容 |