<template>
  <demo-section>
    <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>
  </demo-section>
</template>
<script>
export default {
  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
    }
  }
}
</script>
<style>
.tooltipWrap {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}
p{
  font-size: 12px;
}
</style>