drip-ui/packages/tooltip/zh-CN.md

Lightweight Mobile UI Components built on Vue

## tooltip

### 使用指南
``` javascript
import { Tooltip } from 'drip-ui'

Vue.use(Tooltip)
```

### 代码演示

```html
  <div
    v-for="(item, index) in tooltipList"
    :key="index"
    class="tooltipWrap">
    <drip-tooltip
      :visible.sync="item.visible"
      @change="change(item)"
      :type="item.type"
      ref="tooltip">
      <template slot="icon">
        <drip-button>{{ item.type  }}</drip-button>
      </template>
      <template slot="container">
        <p>{{ item.type  }}</p>
      </template>
    </drip-tooltip>
  </div>
```
```js
data () {
  return {
    tooltipList: [
      {
        type: 'auto',
        visible: false
      },
      {
        type: 'top',
        visible: false
      },
      {
        type: 'right',
        visible: false
      },
      {
        type: 'bottom',
        visible: false
      },
      {
        type: 'left',
        visible: false
      }]
  }
},
methods: {
  change (data) {
    if (data.visible) {
      data.visible = false
      return
    }
    this.tooltipList.forEach((item) => {
      item.visible = false
    })
    data.visible = true
  }
}
```

### API

| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| visible.sync | 是否显示弹出 | `Boolean` | `false` |
| type | tooltip方向 总共有三个值 top right bottom left auto(只自适应上下和边界) | `String` | `auto` |
| backgroundColor | 三角和背景颜色 | `String` | `#fff` |


### Event

| 参数 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | 点击icon时候触发的事件 | `-` |

### Slot

| 参数 | 说明 | 参数 |
|-----------|-----------|-----------|
| icon | 点击区域的slot | `-` |
| container | 弹框内容区域 | `-` |