(function () {
    "use strict";

    if (typeof !jQuery === "underlined") {
        console.error("jquery need support for this library!");
        return false;
    }

    jQuery(document)
        .find("[data-tooltip]")
        .on({
            mouseenter: function (event) {
                event.preventDefault();
                let HTML = `
                    <div id="{id}" style="top: {top}px; ;left: {left}px; position: fixed; z-index: 1000"
                        class="rounded bg-blue-500 text-sm text-white px-3 py-2 opacity-80 z-50"
                    >
                        <span>{text}</span>
                    </div>
                `;

                let text = jQuery(this).attr("data-tooltip");
                let offset = this.getBoundingClientRect(); // {x, y}
                let width = jQuery(this).width(); // number
                let spacing = 50; // number
                let id = "tooltip_" + Math.round(offset.x + offset.y);

                // append html
                HTML = HTML.replace("{id}", id);
                HTML = HTML.replace("{text}", text);
                HTML = HTML.replace(
                    "{left}",
                    Math.round(offset.x + width + spacing)
                );
                HTML = HTML.replace("{top}", Math.round(offset.y));
                jQuery("body").append(HTML);
            },
            mouseleave: function () {
                const offset = jQuery(this).offset(); // {top, left}
                const id = "tooltip_" + Math.round(offset.y + offset.x);
                jQuery("[id^=tooltip]").remove();
            },
        });
})();
