Vue.js right tooltips

Vue.js pop over component that appears to the right of a button on user hover.


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]

  <div class="flex flex-wrap">
    <div class="w-full text-center">
      <button ref="btnRef" v-on:mouseenter="toggleTooltip()" v-on:mouseleave="toggleTooltip()" 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">
        right pink
      <div ref="tooltipRef" v-bind:class="{'hidden': !tooltipShow, 'block': tooltipShow}" class="bg-pink-600 border-0 ml-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg">
          <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 tooltip title
          <div class="text-white p-3">
            And here's some amazing content. It's very engaging. Right?


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

export default {
  name: "right-pink-tooltip",
  data() {
    return {
      tooltipShow: false
  methods: {
    toggleTooltip: function(){
        this.tooltipShow = false;
      } else {
        this.tooltipShow = true;
        createPopper(this.$refs.btnRef, this.$refs.tooltipRef, {
          placement: "right"