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

<script setup>
import AisPopover from "@/components/popover/AisPopover.vue";
import AisButton from "@/components/button/AisButton.vue";
</script>

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