# Tooltip 文字提示

## 何时使用
- 鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
- 可用来代替系统默认的`title`提示，提供一个**按钮/文字/操作**的文案解释。

### 基础用法

使用`content`属性来决定 hover 时的提示信息。  
由`placement`属性决定展示效果：`placement`属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。  
如 placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

@[demo](./demo/basic.vue)



### trigger

`trigger`参数使用对象来确定 popper 与 target 的触发事件

@[demo](./demo/trigger.vue)


### slot

使用 `content` slot 来自定义内容

@[demo](./demo/slot.vue)


### 禁止状态

使用 `disabled` 禁止

@[demo](./demo/disabled.vue)



### 指令方式
[请查看指令文档](../resources/directives/tooltip.md)

### props

| 参数             | 说明             | 类型          | 默认值              | 可选值                                                                                                    |
| ---------------- | ---------------- | ------------- | ------------------- | --------------------------------------------------------------------------------------------------------- |
| title            | 标题             | String        | ""                  | -                                                                                                         |
| trigger          | 触发方式         | String        | click               | none/click/focus/hover/contentmenu                                                                             |
| transition       | 定义渐变动画     | String        | -                   | fade-in-linear                                                                                            |
| placement        | 出现位置         | String        | top                 | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |
| visible(v-model) | 状态是否可见     | Boolean       | false               | -                                                                                                         |
| offset           | 出现位置的偏移量 | Number/String | 0                   | -                                                                                                         |
| visible-arrow    | 是否显示箭头     | Boolean       | true                | false                                                                                                     |
| disabled    | 禁止状态     | Boolean       | false                | true                                                                                                     |
| popper-width | 指定popper的宽度 | String | - | - |
| popper-class | 指定popper的class | - | - | - |
| popper-options   | popper.js 的参数 | Object        | 参考 popper.js 文档 | -                                                                                                         |

### slots

| 插槽名 | 说明       |
| ------ | ---------- |
| title  | 自定义标题 |

### events

| 事件名称    | 说明                   | 回调参数 |
| ----------- | ---------------------- | -------- |
| after-enter | 显示动画播放完毕后触发 | -        |
| after-leave | 隐藏动画播放完毕后触发 | -        |