<template>
  <div class="demo-tooltip-directive">
    <div class="demo-box">
      <ui-button v-tooltip:hover="'这是指令的Tooltip'">
        hover
      </ui-button>
      <ui-button v-tooltip:click="'这是指令的Tooltip'">
        click
      </ui-button>
    </div>

    <div class="demo-box">
      <ui-button v-tooltip:click.bottom="'字符串形式的传参'">
        指定方向
      </ui-button>
      <ui-button
        v-tooltip="{
          placement: 'right',
          content: '使用对象的形式传递参数'
        }">
        使用对象
      </ui-button>
    </div>

    <div class="demo-box">
      <ui-button
        v-tooltip:hover="'这是指令的Tooltip'"
        disabled>
        禁止状态下不生效
      </ui-button>
    </div>
  </div>
</template>
<script>
import { Button } from "amumu-ui"
import tooltip from "amumu-ui/src/directives/tooltip"
import "amumu-ui/src/components/tooltip/style"

export default {
  components: {
    "ui-button": Button,
  },
  directives: {
    tooltip,
  },
}
</script>
