基于JavaScript实现Logo悬停弹出data-description内容弹窗

Here's a clean, vanilla JavaScript implementation to show a popup with the text from the data-description attribute when hovering over your logo:

Step 1: Your Existing HTML Snippet #

<div class=""></div>
<a href="#">
  <span>
    <img src="images/weekend.png" class="pic-width border-radius" data-description="This is good if you travel alone">
  </span>
</a>

Step 2: The JavaScript Code #

// Select all images with a data-description attribute (works for multiple logos too)
const logoImages = document.querySelectorAll('img[data-description]');

// Helper function to build a styled popup element
function createPopup() {
    const popup = document.createElement('div');
    
    // Customize these styles to match your site's design
    popup.style.position = 'absolute';
    popup.style.backgroundColor = '#2d2d2d';
    popup.style.color = '#ffffff';
    popup.style.padding = '6px 10px';
    popup.style.borderRadius = '3px';
    popup.style.fontSize = '13px';
    popup.style.zIndex = '9999';
    popup.style.pointerEvents = 'none'; // Prevent popup from blocking mouse interactions
    popup.style.whiteSpace = 'nowrap'; // Keep text on a single line (optional)
    
    return popup;
}

// Attach hover events to each logo image
logoImages.forEach(img => {
    let activePopup;

    // Show popup when mouse enters the logo
    img.addEventListener('mouseenter', () => {
        const description = img.getAttribute('data-description');
        if (!description) return; // Skip if no description exists

        activePopup = createPopup();
        activePopup.textContent = description;

        // Calculate position relative to the image (adjust offsets as needed)
        const imgRect = img.getBoundingClientRect();
        activePopup.style.top = `${imgRect.bottom + window.scrollY + 4}px`;
        activePopup.style.left = `${imgRect.left + window.scrollX}px`;

        // Add popup to the page
        document.body.appendChild(activePopup);
    });

    // Remove popup when mouse leaves the logo
    img.addEventListener('mouseleave', () => {
        if (activePopup && activePopup.parentNode) {
            activePopup.parentNode.removeChild(activePopup);
            activePopup = null;
        }
    });
});

Key Notes & Customizations: #

• Multi-logo support: Using querySelectorAll means this code works for any number of images with the data-description attribute, not just your single logo.
• Style flexibility: Tweak the inline styles in createPopup() to match your site’s color scheme, font, and spacing preferences.
• Smart positioning: The popup accounts for window scroll to stay aligned with the logo even if the user has scrolled down the page.
• Clean cleanup: The popup is removed from the DOM when the mouse leaves the logo, avoiding unnecessary clutter.

Quick Position Adjustments: #

• To place the popup above the logo instead of below:

  activePopup.style.top = `${imgRect.top + window.scrollY - activePopup.offsetHeight - 4}px`;
  

• To center the popup horizontally relative to the logo:

  activePopup.style.left = `${imgRect.left + window.scrollX + (imgRect.width / 2) - (activePopup.offsetWidth / 2)}px`;
  

内容的提问来源于stack exchange，提问作者Nemanja Filipovic