// Silence may be golden, but sometimes words paint the canvas of understanding.
const LinksyTooltip = {
  name: "LinksyTooltip",
  beforeMount(el, binding) {
    let message = binding.value.message;
    const flow = binding.value.flow || "down";

    const tooltipWrapper = document.createElement("div");
    tooltipWrapper.className = "linksy-tooltip";

    const iconWrapper = document.createElement("span");
    const icon = document.createElement("i");
    icon.className = "fa-regular fa-circle-question";

    // set up the event handlers for mouseover and mouseleave
    icon.addEventListener("mouseover", () => {
      icon.classList.remove("fa-regular");
      icon.classList.add("fa-solid");
    });

    icon.addEventListener("mouseleave", () => {
      icon.classList.remove("fa-solid");
      icon.classList.add("fa-regular");
    });

    // append the icon into the wrapper
    iconWrapper.appendChild(icon);

    // set the custom attributes
    iconWrapper.setAttribute("tooltip", message);
    iconWrapper.setAttribute("flow", flow);

    tooltipWrapper.appendChild(iconWrapper);
    el.appendChild(tooltipWrapper);
  },
};
