MediaWiki:Gadget-Tooltip.js

From JoJo's Bizarre Encyclopedia - JoJo Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
$(document).ready(function() {
    var popups = document.querySelectorAll('.popup');

    Array.prototype.forEach.call(popups, function(popup) {
        var popupWrapper = popup.closest('.popup-wrapper');

        if (popupWrapper) {
            var popupBox = document.createElement('div');
            popupBox.classList.add('popup-box');
            popupBox.textContent = popup.getAttribute('data-content');
            popupWrapper.appendChild(popupBox);

            var isClickedOpen = false;
            var isHovering = false;

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

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

            popup.addEventListener('mouseleave', function() {
                isHovering = false;
                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.style.display = 'none';
                    isClickedOpen = false;
                }
            });
        }
    });
});