<template>
  <div>
    <div ref="popcorn" id="popcorn" aria-describedby="tooltip"></div>
    <div v-show="visible" ref="tooltip" id="tooltip" role="tooltip">
      My tooltip
      <div id="arrow" data-popper-arrow></div>
    </div>
  </div>
</template>

<script>
  // For Vue@3
  import { ref } from "vue";
  // For Vue@2
  import { ref } from "@vue/composition-api";
  import { usePopperjs } from "vue-use-popperjs";

  export default {
    setup() {
      const popcorn = ref();
      const tooltip = ref();
      const { instance, visible } = usePopperjs(popcorn, tooltip, {
        placement: "top",
        modifiers: [
          {
            name: "offset",
            options: {
              offset: [0, 8],
            },
          },
        ],
      });

      return {
        popcorn,
        tooltip,
        visible,
      };
    },
  };
</script>