User:TheMcr/common.js: Difference between revisions

Revision as of 14:53, 5 April 2025

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';
  });
});