@mekari/mekari-ui-vue/src/plugins/Popover/index.js

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

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

const install = function (Vue) {
  Vue.directive('popover', {
    bind(el, binding) {
      let popperInstance = null;
      const { modifiers } = binding;

      // Create popover, and the append it to document.body
      const popoverTitle = `
        <h3 class="popover-header">
          ${el.title ? el.title : ''}
        </h3>
      `;
      const popoverBody = `
        <div class="popover-body">
          ${binding.value ? binding.value : ''}
        </div>
      `;
      const popoverTemplate = document.createElement('div');
      popoverTemplate.classList.add('popover', 'fade');
      popoverTemplate.innerHTML = el.title ? popoverTitle + popoverBody : popoverBody;
      document.body.appendChild(popoverTemplate);

      // Helper function to get popover js placement on popperjs
      function getPosition() {
        let output = 'top';
        const positionList = ['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-start', 'bottom', 'bottom-end', 'left-start', 'left', 'left-end'];
        positionList.forEach(position => {
          output = modifiers[position] ? position : output;
        });
        return output;
      };

      // Function to handle click event
      function handleClick() {
        popoverTemplate.classList.toggle('show');
      }

      // Function to handle show popover on hover and focus event
      function showPopover() {
        popoverTemplate.classList.add('show');
      }

      // Function to handle hide popover on hover and focus event
      function hidePopover() {
        popoverTemplate.classList.remove('show');
      }

      // Register popper to determine the position of popover
      popperInstance = createPopper(el, popoverTemplate, {
        placement: getPosition(),
        modifiers: [
          {
            name: 'offset',
            options: {
              offset: [0, 8],
            },
          },
        ],
      });

      // Handle event of popover
      if (modifiers.click) {
        el.addEventListener('click', handleClick);
      } else {
        el.addEventListener('mouseenter', showPopover);
        el.addEventListener('mouseleave', hidePopover);
      }
    },
  });
};

export default install;