Animated Popover component using popper.js for Vue.js

slick-popover is a Vue.js component which allow to display an interactive, animated popover to any DOM element. Useful for display onclick flash messages on your vue app.

Installation

npm install vue-slick-popover

Usage

Create a popover component together with the trigger element in the template.

<template>
  <div id="app">
    <img ref="popoverReference" width="20%" src="./assets/logo.png" @click="openPopover">

    <VueSlickPopover
      v-if="isPopoverVisible"
      :popover-options="popoverOptions"
      @closePopover="closePopover"
    >
      <VueSlickPopoverContent>
        <p @closePopover="closePopover">Content</p>
      </VueSlickPopoverContent>
    </VueSlickPopover>
  </div>
</template>

Import the component & stylesheet in your project and Activate the component.

import Vue from "vue"
import { VueSlickPopover, VueSlickPopoverContent } from "vue-slick-popover"
import "vue-slick-popover/dist/vue-slick-popover.css"

export default {
    components: {
        VueSlickPopover,
        VueSlickPopoverContent
    },

    data() {
        return {
          isPopoverVisible: false,
          popoverOptions: {
            animation: "scale-fade",
            popoverReference: null,
            placement: "top",
            offset: "0,0"
          }
        }
      },

      mounted() {
        this.popoverOptions.popoverReference = this.$refs.popoverReference
      },

      methods: {
        closePopover() {
          this.isPopoverVisible = false
        },

        openPopover() {
          this.isPopoverVisible = true
        }
      }
}

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by mateuszRybczonek, Visit their official github repository for more information and follow for future updates.

---

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.