MediaWiki:Gadget-Tooltip.js

From JoJo's Bizarre Encyclopedia - JoJo Wiki
Revision as of 01:30, 31 May 2024 by Vish (talk | contribs) (Created page with "$(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.appendChild(popupBox); var isClickedOpen = false; var isHovering = false; popup.addEventListener('click', function(event) {...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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 popupBox = document.createElement('div');
        popupBox.classList.add('popup-box');
        popupBox.textContent = popup.getAttribute('data-content');
        popup.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';
            }
        });

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