MediaWiki:Gadget-Tooltip.js

$(document).ready(function() {
    var popups = document.querySelectorAll('.popup');

    Array.prototype.forEach.call(popups, function(popup) {
        var popupBox = document.createElement('div');
        popupBox.classList.add('popup-box');
        popupBox.textContent = popup.getAttribute('data-content');
        document.body.appendChild(popupBox);  // Append to body to avoid layout influence

        var isClickedOpen = false;
        var isHovering = false;

        function positionPopupBox() {
            var rect = popup.getBoundingClientRect();
            popupBox.style.top = rect.bottom + window.pageYOffset + 'px';
            popupBox.style.left = rect.left + window.pageXOffset + 'px';
        }

        function updatePositionOnScroll() {
            if (isHovering) {
                positionPopupBox();
            }
        }

        popup.addEventListener('click', function(event) {
            event.stopPropagation();
            if (isClickedOpen) {
                popupBox.style.display = 'none';
                isClickedOpen = false;
                window.removeEventListener('scroll', updatePositionOnScroll);
            } else {
                positionPopupBox();  // Position when clicked
                popupBox.style.display = 'block';
                isClickedOpen = true;
                isHovering = false;  // Reset hovering state when clicked
            }
        });

        popup.addEventListener('mouseenter', function() {
            isHovering = true;
            positionPopupBox();  // Position on hover
            popupBox.style.display = 'block';
            window.addEventListener('scroll', updatePositionOnScroll);  // Listen to scroll when hovering
        });

        popup.addEventListener('mouseleave', function() {
            isHovering = false;
            if (!isClickedOpen) {
                popupBox.style.display = 'none';
                window.removeEventListener('scroll', updatePositionOnScroll);
            }
        });

        popupBox.addEventListener('click', function(event) {
            event.stopPropagation();  // Prevent the click event from closing the popup box
        });

        document.addEventListener('click', function(event) {
            if (!popup.contains(event.target) && !popupBox.contains(event.target)) {
                popupBox.style.display = 'none';
                isClickedOpen = false;
                isHovering = false;
                window.removeEventListener('scroll', updatePositionOnScroll);
            }
        });
    });
});