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.

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.

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.

Related