Vue.js bottom popover

Vue.js pop over component that appears to the bottom of a button on user click.

Examples

For this component to properly work, you will need to install @popperjs/core into your project. Please run the following:
npm i -E @popperjs/[email protected]

<template>
  <div class="flex flex-wrap">
    <div class="w-full text-center">
      <button ref="btnRef" v-on:click="togglePopover()" class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
        bottom pink
      </button>
      <div ref="popoverRef" v-bind:class="{'hidden': !popoverShow, 'block': popoverShow}" class="bg-pink-600 border-0 mt-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg">
        <div>
          <div class="bg-pink-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
            pink popover title
          </div>
          <div class="text-white p-3">
            And here's some amazing content. It's very engaging. Right?
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { createPopper } from "@popperjs/core";

export default {
  name: "bottom-pink-popover",
  data() {
    return {
      popoverShow: false
    }
  },
  methods: {
    togglePopover: function(){
      if(this.popoverShow){
        this.popoverShow = false;
      } else {
        this.popoverShow = true;
        createPopper(this.$refs.btnRef, this.$refs.popoverRef, {
          placement: "bottom"
        });
      }
    }
  }
}
</script>