<template>
  <div class="flex justify-around gap-4">
    <AisButton variant="secondary"
               size="md"
               font="sans"
               v-popover="{ title: 'Popover Title', content: 'Triggered by hovering over target!', triggers: 'hover' }"
    >Hover</AisButton>

    <AisButton variant="secondary"
               size="md"
               font="sans"
               v-popover="{ title: 'Popover Title', content: 'Triggered by clicking on target!', triggers: 'click' }"
    >Click</AisButton>

    <AisButton variant="secondary"
               size="md"
               font="sans"
               v-popover="{ title: 'Popover Title', content: 'Triggered by focusing target!', triggers: 'focus' }"
    >Focus</AisButton>
  </div>
</template>

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

<script>
import { popoverDirective as popover } from "@/components/popover/directive";
export default {
  name: "AisPopoverTriggers",
  directives: {
    popover
  }
}
</script>