TippyJS confirm box

Confirm box using tippy js

by Milan Tarami

HTML

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css">
<div id="template" class="hidden">
  <form action="http://myurl.domain/id" method="POST">
  </form>
    <div class="confirm__box p-3">
       <div class="confirm__text text-center mb-4">
        <strong>Are you sure ?</strong>
      <p>
      You won't able to revert this back.
      </p>
       </div>
       <div class="confirm__action flex justify-between">
         <button class="ok-btn w-10 text-white bg-green-600 px-1 rounded-sm">
           Yes
         </button>
          <button class="cancel-btn w-10 text-white bg-red-600 px-1 rouneded-sm">
           No
         </button>
       </div>
    </div>
</div>

<button type="button" class="bg-red-600 px-2 py-1 rounded-md text-white">
Trash
</button>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

const template = document.getElementById('template');

tippy('button', {

  content: template.innerHTML,
  allowHTML: true,
	theme: 'material',
	interactive: true,
	zIndex: 99999,
	placement: 'auto',
	trigger: 'click',
  onCreate(instance) {
  
   instance.popper.querySelector('.cancel-btn').onclick = () => {
    instance.hide();
   }
   
   instance.popper.querySelector('.ok-btn').onclick = () => {
    instance.hide();
    instance.popper.querySelector('form').submit();
    alert('form submitt')
   }
   
  }
});