Animated Popover Component For Vue – slick-popover

Install & Download:

# NPM
$ npm install vue-slick-popover --save

Description:

slick-popover is a Vue.js component that attaches an interactive, animated popover to any DOM element.

More features:

• 12 positions
• 2 animations: fade, scale-fade
• Custom offset.

How to use it:

1. Import the component & stylesheet in your project.

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

2. Register the component.

export default {
    components: {
        VueSlickPopover,
        VueSlickPopoverContent
    }
}

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

<template>
  <div>
    <img ref="popoverReference" width="20%" src="trigger.png" @click="openPopover">
    <VueSlickPopover
      v-if="isPopoverVisible"
      :popover-options="popoverOptions"
      @closePopover="closePopover"
    >
      <VueSlickPopoverContent>
        <p @closePopover="closePopover">Popover Content Here</p>
      </VueSlickPopoverContent>
    </VueSlickPopover>
  </div>
</template>

4. Activate the component.

data() {
  return {
    isPopoverVisible: false,
    popoverOptions: {
      // options here
    }
  }
},
mounted() {
  this.popoverOptions.popoverReference = this.$refs.popoverReference
},
methods: {
  closePopover() {
    this.isPopoverVisible = false
  },
    
  openPopover() {
    this.isPopoverVisible = true
  }
}

5. Possible options to customize the popover.

• animation: null, scale-fade, or fade
• placement: top, top-start, top-end, right, right-start, right-end, bottom, bottom-start, bottom-end, left, left-start, left-end

popoverOptions: { 
  animation: "scale-fade",
  placement: "top",
  offset: "0,0"
}