import { DirectiveBinding, ObjectDirective, VNode } from "vue";
import { createPopper } from "@popperjs/core";

const VTooltip: ObjectDirective = {
    mounted(el: HTMLElement, binding: DirectiveBinding<any>) {
        const tooltipText = binding.value;
        const tooltip = document.createElement("div");
        tooltip.innerText = tooltipText;
        el.appendChild(tooltip);
        tooltip.style.display = "none";

        const popper = createPopper(el, tooltip, {
            placement: "top",
            modifiers: [
                {
                    name: "offset",
                    options: {
                        offset: [0, 8],
                    },
                },
            ],
        });

        el.addEventListener("mouseenter", () => {
            tooltip.style.display = "block";
        });

        el.addEventListener("mouseleave", () => {
            tooltip.style.display = "none";
        });
    },

    unmounted(el: HTMLElement) {
        const tooltip = el.querySelector(".tooltip");
        if (tooltip) {
            el.removeChild(tooltip);
        }
    },
};

export default VTooltip;