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');
        popup.parentNode.appendChild(popupBox); // Append to the parent node

        var isClickedOpen = false;

        function positionPopupBox() {
            var rect = popup.getBoundingClientRect();
            popupBox.style.position = 'absolute';
            popupBox.style.top = '100%'; // Directly below the popup span
            popupBox.style.left = '0';   // Align with the left edge of the popup span
        }

        function checkVisibility() {
            var rect = popup.getBoundingClientRect();
            if (rect.bottom < 0 || rect.top > window.innerHeight) {
                popupBox.style.display = 'none'; // Hide popup box if the popup span is off screen
            } else {
                popupBox.style.display = 'block'; // Show popup box if the popup span is visible
            }
        }

        popup.addEventListener('click', function(event) {
            event.stopPropagation();
            positionPopupBox();
            if (isClickedOpen) {
                popupBox.style.display = 'none';
                isClickedOpen = false;
            } else {
                popupBox.style.display = 'block';
                isClickedOpen = true;
            }
            window.addEventListener('scroll', checkVisibility);
        });

        popup.addEventListener('mouseenter', function() {
            positionPopupBox();
            popupBox.style.display = 'block';
        });

        popup.addEventListener('mouseleave', function() {
            if (!isClickedOpen) {
                popupBox.style.display = 'none';
            }
        });

        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;
                window.removeEventListener('scroll', checkVisibility);
            }
        });
    });
});