User:TheMcr/common.js

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.

<script>
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.style.display = 'none';
tooltip.style.width = '300px';
tooltip.style.z-index = '1000';
document.body.appendChild(tooltip);

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('mouseenter', async (e) => {
    const url = new URL(link.href);
    const title = decodeURIComponent(url.pathname.split('/').pop());

    tooltip.style.display = 'block';
    tooltip.innerHTML = 'Loading...';

    const response = await fetch(`https://www.boobpedia.com/${title}`);
    const data = await response.json();

    tooltip.innerHTML = `
      <strong>${data.title}</strong><br>
      ${data.thumbnail ? `<img src="${data.thumbnail.source}" alt="${data.title}">` : ''}
      <p>${data.extract}</p>
    `;

    const rect = link.getBoundingClientRect();
    tooltip.style.left = `${rect.right + 10 + window.scrollX}px`;
    tooltip.style.top = `${rect.top + window.scrollY}px`;
  });

  link.addEventListener('mouseleave', () => {
    tooltip.style.display = 'none';
  });
});
<script>
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.style.display = 'none';
tooltip.style.width = '300px';
tooltip.style.z-index = '1000';
document.body.appendChild(tooltip);

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('mouseenter', async (e) => {
    const url = new URL(link.href);
    const title = decodeURIComponent(url.pathname.split('/').pop());

    tooltip.style.display = 'block';
    tooltip.innerHTML = 'Loading...';

    const response = await fetch(`https://www.boobpedia.com/${title}`);
    const data = await response.json();

    tooltip.innerHTML = `
      <strong>${data.title}</strong><br>
      ${data.thumbnail ? `<img src="${data.thumbnail.source}" alt="${data.title}">` : ''}
      <p>${data.extract}</p>
    `;

    const rect = link.getBoundingClientRect();
    tooltip.style.left = `${rect.right + 10 + window.scrollX}px`;
    tooltip.style.top = `${rect.top + window.scrollY}px`;
  });

  link.addEventListener('mouseleave', () => {
    tooltip.style.display = 'none';
  });
});
</script>