Newer
Older
vmk-ui-kit / src / js / components / tooltips.js
/**
 * VMK UI Kit browser tooltip helper.
 *
 * Mirrors gnexus-ui-kit tooltip helpers:
 *   init(root), show(trigger), hide(trigger)
 */

const initializedRoots = new WeakSet();

function show(trigger) {
  trigger?.closest(".tooltip")?.classList.add("is-visible");
}

function hide(trigger) {
  trigger?.closest(".tooltip")?.classList.remove("is-visible");
}

function handleMouseEnter(event) {
  show(event.target.closest(".tooltip-trigger"));
}

function handleMouseLeave(event) {
  hide(event.target.closest(".tooltip-trigger"));
}

function handleFocus(event) {
  show(event.target.closest(".tooltip-trigger"));
}

function handleBlur(event) {
  hide(event.target.closest(".tooltip-trigger"));
}

function init(root = document) {
  if (initializedRoots.has(root)) return;

  root.querySelectorAll(".tooltip").forEach(wrapper => {
    const trigger = wrapper.querySelector(".tooltip-trigger");
    if (!trigger) return;

    trigger.addEventListener("mouseenter", handleMouseEnter);
    trigger.addEventListener("mouseleave", handleMouseLeave);
    trigger.addEventListener("focus", handleFocus);
    trigger.addEventListener("blur", handleBlur);
  });

  initializedRoots.add(root);
}

export default {
  init,
  show,
  hide
};