Notus Svelte Popovers

Pop over component that appears to the left/top/right/bottom of a button on user click. The dynamic part of them is made using Svelte and the styles are done using Tailwind CSS.

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

Examples

Left

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "left"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-blueGray-500 text-white active:bg-blueGray-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">
      left blueGray
    </button>
    <div bind:this="{popoverRef}" class="bg-blueGray-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-blueGray-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          blueGray 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "left"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-red-500 text-white active:bg-red-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">
      left red
    </button>
    <div bind:this="{popoverRef}" class="bg-red-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-red-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          red 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "left"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-orange-500 text-white active:bg-orange-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">
      left orange
    </button>
    <div bind:this="{popoverRef}" class="bg-orange-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-orange-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          orange 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "left"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-amber-500 text-white active:bg-amber-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">
      left amber
    </button>
    <div bind:this="{popoverRef}" class="bg-amber-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-amber-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          amber 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "left"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-emerald-500 text-white active:bg-emerald-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">
      left emerald
    </button>
    <div bind:this="{popoverRef}" class="bg-emerald-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-emerald-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          emerald 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "left"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-teal-500 text-white active:bg-teal-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">
      left teal
    </button>
    <div bind:this="{popoverRef}" class="bg-teal-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-teal-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          teal 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "left"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-lightBlue-500 text-white active:bg-lightBlue-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">
      left lightBlue
    </button>
    <div bind:this="{popoverRef}" class="bg-lightBlue-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-lightBlue-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          lightBlue 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "left"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-indigo-500 text-white active:bg-indigo-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">
      left indigo
    </button>
    <div bind:this="{popoverRef}" class="bg-indigo-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-indigo-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          indigo 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "left"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-purple-500 text-white active:bg-purple-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">
      left purple
    </button>
    <div bind:this="{popoverRef}" class="bg-purple-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-purple-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          purple 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "left"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" 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">
      left pink
    </button>
    <div bind:this="{popoverRef}" class="bg-pink-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <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>

Top

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "top"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-blueGray-500 text-white active:bg-blueGray-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">
      top blueGray
    </button>
    <div bind:this="{popoverRef}" class="bg-blueGray-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-blueGray-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          blueGray 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "top"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-red-500 text-white active:bg-red-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">
      top red
    </button>
    <div bind:this="{popoverRef}" class="bg-red-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-red-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          red 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "top"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-orange-500 text-white active:bg-orange-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">
      top orange
    </button>
    <div bind:this="{popoverRef}" class="bg-orange-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-orange-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          orange 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "top"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-amber-500 text-white active:bg-amber-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">
      top amber
    </button>
    <div bind:this="{popoverRef}" class="bg-amber-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-amber-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          amber 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "top"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-emerald-500 text-white active:bg-emerald-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">
      top emerald
    </button>
    <div bind:this="{popoverRef}" class="bg-emerald-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-emerald-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          emerald 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "top"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-teal-500 text-white active:bg-teal-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">
      top teal
    </button>
    <div bind:this="{popoverRef}" class="bg-teal-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-teal-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          teal 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "top"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-lightBlue-500 text-white active:bg-lightBlue-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">
      top lightBlue
    </button>
    <div bind:this="{popoverRef}" class="bg-lightBlue-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-lightBlue-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          lightBlue 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "top"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-indigo-500 text-white active:bg-indigo-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">
      top indigo
    </button>
    <div bind:this="{popoverRef}" class="bg-indigo-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-indigo-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          indigo 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "top"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-purple-500 text-white active:bg-purple-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">
      top purple
    </button>
    <div bind:this="{popoverRef}" class="bg-purple-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-purple-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          purple 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "top"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" 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">
      top pink
    </button>
    <div bind:this="{popoverRef}" class="bg-pink-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <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>

Right

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "right"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-blueGray-500 text-white active:bg-blueGray-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 blueGray
    </button>
    <div bind:this="{popoverRef}" class="bg-blueGray-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-blueGray-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          blueGray 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "right"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-red-500 text-white active:bg-red-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 red
    </button>
    <div bind:this="{popoverRef}" class="bg-red-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-red-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          red 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "right"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-orange-500 text-white active:bg-orange-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 orange
    </button>
    <div bind:this="{popoverRef}" class="bg-orange-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-orange-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          orange 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "right"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-amber-500 text-white active:bg-amber-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 amber
    </button>
    <div bind:this="{popoverRef}" class="bg-amber-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-amber-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          amber 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "right"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-emerald-500 text-white active:bg-emerald-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 emerald
    </button>
    <div bind:this="{popoverRef}" class="bg-emerald-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-emerald-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          emerald 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "right"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-teal-500 text-white active:bg-teal-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 teal
    </button>
    <div bind:this="{popoverRef}" class="bg-teal-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-teal-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          teal 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "right"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-lightBlue-500 text-white active:bg-lightBlue-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 lightBlue
    </button>
    <div bind:this="{popoverRef}" class="bg-lightBlue-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-lightBlue-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          lightBlue 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "right"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-indigo-500 text-white active:bg-indigo-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 indigo
    </button>
    <div bind:this="{popoverRef}" class="bg-indigo-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-indigo-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          indigo 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "right"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-purple-500 text-white active:bg-purple-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 purple
    </button>
    <div bind:this="{popoverRef}" class="bg-purple-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-purple-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          purple 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "right"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" 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">
      right pink
    </button>
    <div bind:this="{popoverRef}" class="bg-pink-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <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>

Bottom

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "bottom"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-blueGray-500 text-white active:bg-blueGray-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 blueGray
    </button>
    <div bind:this="{popoverRef}" class="bg-blueGray-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-blueGray-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          blueGray 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "bottom"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-red-500 text-white active:bg-red-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 red
    </button>
    <div bind:this="{popoverRef}" class="bg-red-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-red-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          red 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "bottom"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-orange-500 text-white active:bg-orange-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 orange
    </button>
    <div bind:this="{popoverRef}" class="bg-orange-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-orange-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          orange 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "bottom"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-amber-500 text-white active:bg-amber-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 amber
    </button>
    <div bind:this="{popoverRef}" class="bg-amber-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-amber-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          amber 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "bottom"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-emerald-500 text-white active:bg-emerald-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 emerald
    </button>
    <div bind:this="{popoverRef}" class="bg-emerald-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-emerald-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          emerald 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "bottom"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-teal-500 text-white active:bg-teal-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 teal
    </button>
    <div bind:this="{popoverRef}" class="bg-teal-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-teal-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          teal 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "bottom"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-lightBlue-500 text-white active:bg-lightBlue-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 lightBlue
    </button>
    <div bind:this="{popoverRef}" class="bg-lightBlue-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-lightBlue-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          lightBlue 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "bottom"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-indigo-500 text-white active:bg-indigo-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 indigo
    </button>
    <div bind:this="{popoverRef}" class="bg-indigo-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-indigo-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          indigo 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "bottom"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" on:click={togglePopover} class="bg-purple-500 text-white active:bg-purple-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 purple
    </button>
    <div bind:this="{popoverRef}" class="bg-purple-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <div>
        <div class="bg-purple-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
          purple 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>

<script>

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

let popoverShow = false;

let btnRef;

let popoverRef;

function togglePopover(){
  if(popoverShow){
    popoverShow = false;
  } else {
    popoverShow = true;
    createPopper(btnRef, popoverRef, {
      placement: "bottom"
    });
  }
}

</script>

<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button bind:this="{btnRef}" 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 bind:this="{popoverRef}" class="bg-pink-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg {popoverShow ? 'block':'hidden'}">
      <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>

Props

Please check the official PopperJS Documentation.

You can also check the Official PopperJS Github Repository.