# Tooltip 文字提示
常用于展示鼠标 hover 时的提示信息。
v2.7.0以上版本支持。
# 初始化
单独引入时：在入口js文件处引入
import { Tooltip } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(Tooltip)
1
2
3
2
3
# 效果
# 基础用法
<ss-tooltip class="item" content="Top Left 提示文字" placement="top-start">
<ss-button>上左</ss-button>
</ss-tooltip>
<ss-tooltip class="item" content="Top Center 提示文字" placement="top">
<ss-button>上边</ss-button>
</ss-tooltip>
<ss-tooltip class="item" content="Top Right 提示文字" placement="top-end">
<ss-button>上右</ss-button>
</ss-tooltip>
<ss-tooltip class="item" content="Left Top 提示文字" placement="left-start">
<ss-button>左上</ss-button>
</ss-tooltip>
<ss-tooltip class="item" content="Left Center 提示文字" placement="left">
<ss-button>左边</ss-button>
</ss-tooltip>
<ss-tooltip class="item" content="Left Bottom 提示文字" placement="left-end">
<ss-button>左下</ss-button>
</ss-tooltip>
<ss-tooltip class="item" content="Right Top 提示文字" placement="right-start">
<ss-button>右上</ss-button>
</ss-tooltip>
<ss-tooltip class="item" content="Right Center 提示文字" placement="right">
<ss-button>右边</ss-button>
</ss-tooltip>
<ss-tooltip class="item" content="Right Bottom 提示文字" placement="right-end">
<ss-button>右下</ss-button>
</ss-tooltip>
<ss-tooltip class="item" content="Bottom Left 提示文字" placement="bottom-start">
<ss-button>下左</ss-button>
</ss-tooltip>
<ss-tooltip class="item" content="Bottom Center 提示文字" placement="bottom">
<ss-button>下边</ss-button>
</ss-tooltip>
<ss-tooltip class="item" content="Bottom Right 提示文字" placement="bottom-end">
<ss-button>下右</ss-button>
</ss-tooltip>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# 主题
Tooltip 组件提供了两个不同的主题：dark和light。
通过设置effect属性来改变主题，默认为light。
<ss-tooltip content="Top center" placement="top" effect="dark">
<ss-button>Dark</ss-button>
</ss-tooltip>
<ss-tooltip content="Bottom center" placement="bottom">
<ss-button>Light</ss-button>
</ss-tooltip>
1
2
3
4
5
6
2
3
4
5
6
:::
# 更多 Content
展示多行文本或者是设置文本内容的格式
用具名 slot 分发content，替代tooltip中的content属性。
<ss-tooltip placement="top">
<div slot="content">多行信息<br/>第二行信息</div>
<ss-button>Top center</ss-button>
</ss-tooltip>
1
2
3
4
2
3
4
# 参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| effect | 默认提供的主题 | String | dark/light | light |
| content | 显示的内容，也可以通过 slot#content 传入 DOM | 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 |
| value / v-model | 状态是否可见 | Boolean | — | false |
| disabled | Tooltip 是否可用 | Boolean | — | false |
| offset | 出现位置的偏移量 | Number | — | 0 |
| transition | 定义渐变动画 | String | — | ss-fade-in-linear |
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见Vue-popper (opens new window) | Boolean | — | true |
| popper-options | popper.js (opens new window) 的参数 | Object | 参考 popper.js (opens new window) 文档 | { boundariesElement: 'body', gpuAcceleration: false } |
| open-delay | 延迟出现，单位毫秒 | Number | — | 0 |
| manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false |
| popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — |
| enterable | 鼠标是否可进入到 tooltip 中 | Boolean | — | true |
| hide-after | Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏 | number | — | 0 |
| tabindex | Tooltip 组件的 tabindex (opens new window) | number | — | 0 |