<template>
  <div class="grid gap-12">
    <div class="flex justify-between gap-4">
      <AisTooltip content="This is my tooltip content!!!" placement="top">
        <AisButton variant="secondary" size="sm" font="sans">Top</AisButton>
      </AisTooltip>

      <AisTooltip content="This<br>is<br>my<br>tooltip<br>content" placement="right">
        <AisButton variant="secondary" size="sm" font="sans">Right</AisButton>
      </AisTooltip>

      <AisTooltip content="This is my tooltip content!!!" placement="bottom">
        <AisButton variant="secondary" size="sm" font="sans">Bottom</AisButton>
      </AisTooltip>

      <AisTooltip content="This<br>is<br>my<br>tooltip<br>content" placement="left">
        <AisButton variant="secondary" size="sm" font="sans">Left</AisButton>
      </AisTooltip>
    </div>

    <div class="flex justify-between gap-4">
      <AisTooltip content="This is my tooltip content!!!" placement="top-start">
        <AisButton variant="secondary" size="sm" font="sans">Top-Start</AisButton>
      </AisTooltip>

      <AisTooltip content="This<br>is<br>my<br>tooltip<br>content" placement="right-start">
        <AisButton variant="secondary" size="sm" font="sans">Right-Start</AisButton>
      </AisTooltip>

      <AisTooltip content="This is my tooltip content!!!" placement="bottom-start">
        <AisButton variant="secondary" size="sm" font="sans">Bottom-Start</AisButton>
      </AisTooltip>

      <AisTooltip content="This<br>is<br>my<br>tooltip<br>content" placement="left-start">
        <AisButton variant="secondary" size="sm" font="sans">Left-Start</AisButton>
      </AisTooltip>
    </div>

    <div class="flex justify-between gap-4">
      <AisTooltip content="This is my tooltip content!!!" placement="top-end">
        <AisButton variant="secondary" size="sm" font="sans">Top-End</AisButton>
      </AisTooltip>

      <AisTooltip content="This<br>is<br>my<br>tooltip<br>content" placement="right-end">
        <AisButton variant="secondary" size="sm" font="sans">Right-End</AisButton>
      </AisTooltip>

      <AisTooltip content="This is my tooltip content!!!" placement="bottom-end">
        <AisButton variant="secondary" size="sm" font="sans">Bottom-End</AisButton>
      </AisTooltip>

      <AisTooltip content="This<br>is<br>my<br>tooltip<br>content" placement="left-end">
        <AisButton variant="secondary" size="sm" font="sans">Left-End</AisButton>
      </AisTooltip>
    </div>
  </div>
</template>

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

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