@mekari/mekari-ui-vue/src/plugins/Tooltip/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 MTooltipContainer from './container';

const install = function (Vue) {
  Vue.directive('tooltip', {
    bind(el, binding) {
      const { modifiers } = binding;

      // Create tooltip, and the append it to document.body
      const tooltipContainer = document.createElement('div');
      tooltipContainer.id = 'tooltip-target';
      document.body.appendChild(tooltipContainer);
      const tooltipApp = new (Vue.extend(MTooltipContainer))({
        el: '#tooltip-target',
        propsData: {
          el,
          modifiers,
          content: binding.value ? binding.value : '',
        },
      });

      // Function to handle click event
      function handleClick(e) {
        if (document.activeElement !== e.target) {
          tooltipApp.$data.showTooltip = !tooltipApp.$data.showTooltip;
        }
      }

      // Function to handle show tooltip on hover and focus event
      function showTooltip() {
        tooltipApp.$data.showTooltip = true;
      }

      // Function to handle hide tooltip on hover and focus event
      function hideTooltip(e) {
        if (document.activeElement !== e.target) {
          tooltipApp.$data.showTooltip = false;
        }
      }

      // Handle event of tooltip
      if (modifiers.click) {
        el.addEventListener('click', handleClick);
      } else {
        el.addEventListener('mouseenter', showTooltip);
        el.addEventListener('mouseleave', hideTooltip);
      }
      el.addEventListener('focus', showTooltip);
      el.addEventListener('blur', hideTooltip);
    },
  });
};

export default install;