vue-use-popperjs v2.3.8

Vue-use-popperjs

The usePopperjs hook provides an API identical to the ones of createPopper constructor.

Getting Started

Installation

For vue@3:

yarn add vue-use-popperjs

For vue@2 + @vue/composition-api

yarn add vue-use-popperjs @vue/composition-api

Usage

<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, {
        // Popperjs Options
        placement: "top",
        modifiers: [
          {
            name: "offset",
            options: {
              offset: [0, 8],
            },
          },
        ],
        // Extra Options
        trigger: "hover",
      });

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

API

Parameters

Reference

type: MaybeRef<Element | VirtualElement>

Popper

type: MaybeRef<HTMLElement>

Options

Popperjs Options

See popper.js

Extra Options

Return Type