<template>
  <div class="flex justify-between gap-4">
    <AisTooltip content="This is my tooltip!">
      <AisButton variant="secondary" size="sm" font="sans">Using Default Slot</AisButton>
    </AisTooltip>
  
    <AisButton id="myButton" variant="secondary" size="sm" font="sans">Target by ID</AisButton>
    <AisTooltip content="This is my tooltip!"
                target="myButton"
    ></AisTooltip>
  
    <AisButton name="myButton3" variant="secondary" size="sm" font="sans">Target by Name</AisButton>
    <AisTooltip content="This is my tooltip!"
                target="myButton3"
    ></AisTooltip>
  
    <AisButton class="myButton4" variant="secondary" size="sm" font="sans">Target by Class</AisButton>
    <AisTooltip content="This is my tooltip!"
                target=".myButton4"
    ></AisTooltip>
  </div>
</template>

<script setup>
import AisTooltip from "@/components/tooltip/AisTooltip.vue";
import AisButton from "@/components/button/AisButton.vue";
</script>

<script>
export default {
  name: "AisTooltipComponent",
}
</script>