<template>
 <y-tooltip content="popper content">
   <y-button>Hover</y-button>
 </y-tooltip>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
 name: "Base",
});
</script>

<template>
 <y-tooltip v-model="visible">
   <y-button @click="updateVisible">Custom</y-button>
   <template #content>
     <span>这里是一个复杂的content, 里面有链接<y-button size="small" type="link" target="_blank" href="www.baidu.com">百度一下</y-button></span>
   </template>
 </y-tooltip>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
 name: "Custom",
 setup() {
   const visible = ref(false);
   const updateVisible = () => {
     visible.value = !visible.value;
   }

   return {
     visible,
     updateVisible,
   };
 }
});
</script>

<template>
 <y-checkbox v-model="disabled">disabled</y-checkbox>
 <y-tooltip :disabled="!disabled">
   <y-button :disabled="disabled" style="margin: 0 12px;">{{ disabled ? 'disabled' : 'enabled'}}</y-button>
   <template #content>
     <span>这里是一个复杂的content, 里面有链接<y-button size="small" type="link" target="_blank" href="www.baidu.com">百度一下</y-button></span>
   </template>
 </y-tooltip>

 <y-tooltip v-if="disabled">
   <y-button disabled>disabled</y-button>
   <template #content>
     <span>这里是一个复杂的content, 里面有链接<y-button size="small" type="link" target="_blank" href="www.baidu.com">百度一下</y-button></span>
   </template>
 </y-tooltip>
 <y-button v-else>enabled</y-button>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
 name: "Disabled",
 setup() {
   const disabled = ref(false);

   return {
     disabled,
   };
 }
});
</script>