A Simple Popover Component For VueJS 3

Category: Vue.js Vue.js Others | July 23, 2021
Author: valgeirb
Official Page: Go to website
Last Update: July 23, 2021
License: MIT

popover component for vuejs

Description:

A simple to use, fully customizable and light-weight popover component for VueJS 3. Which is inspired and based on PopperJs.

How can I use it?

1. Install the component using npm or yarn.

#with npm
npm install vue3-popper

#with yarn
yarn add vue3-popper

2. Import the component in your file.

import { defineComponent } from "vue";
import Popper from "vue3-popper";

3. Now, register the component. Like following:

export default defineComponent({
    components: {
      Popper,
    },
  });

4. If, you want to show the simple string then, use this:

<template>
  <Popper content="This is the Popper content">
    <button>Trigger element</button>
  </Popper>
</template>

5. Or, if you want use a template then, create like following.

<template>
  <Popper content="This is the Popper content">
    <button>Trigger element</button>
  </Popper>
</template>

6. Available props and customization settings that, you can use as per your requirement.

 /**
       * Preferred placement (the "auto" placements will choose the side with most space.)
       */
      placement: {
        type: String,
        default: "bottom",
        validator: function(value) {
          return [
            "auto",
            "auto-start",
            "auto-end",
            "top",
            "top-start",
            "top-end",
            "bottom",
            "bottom-start",
            "bottom-end",
            "right",
            "right-start",
            "right-end",
            "left",
            "left-start",
            "left-end",
          ].includes(value);
        },
      },
      /**
       * Disables automatically closing the popover when the user clicks away from it
       */
      disableClickAway: {
        type: Boolean,
        default: false,
      },
      /**
       * Offset in pixels along the trigger element
       */
      offsetSkid: {
        type: String,
        default: "0",
      },
      /**
       * Offset in pixels away from the trigger element
       */
      offsetDistance: {
        type: String,
        default: "12",
      },
      /**
       * Trigger the popper on hover
       */
      hover: {
        type: Boolean,
        default: false,
      },
      /**
       * Manually open/close the Popper, other events are ignored if this prop is set
       */
      show: {
        type: Boolean,
        default: null,
      },
      /**
       * Disables the Popper. If it was already open, it will be closed.
       */
      disabled: {
        type: Boolean,
        default: false,
      },
      /**
       * Open the Popper after a delay (ms).
       */
      openDelay: {
        type: [Number, String],
        default: 0,
      },
      /**
       * Close the Popper after a delay (ms).
       */
      closeDelay: {
        type: [Number, String],
        default: 0,
      },
      /**
       * Display an arrow on the popper
       */
      arrow: {
        type: Boolean,
        default: false,
      },
      /**
       * Stop arrow from reaching the edge of the popper
       */
      arrowPadding: {
        type: String,
        default: "0",
      },
      /**
       * If the Popper should be interactive, it will close when clicked/hovered if false
       */
      interactive: {
        type: Boolean,
        default: true,
      },
      /**
       * If the content is just a simple string, it can be passed in as a prop
       */
      content: {
        type: String,
        default: null,
      },