Bigcommerce Stencil主题：鼠标悬停触发色卡Tooltip失效求助

Hey there, let's get that PMS tooltip working for your color swatches. I’ve dealt with similar dynamic element issues in Stencil themes before, so here’s a step-by-step solution:

1. First, Confirm Your Setup #

First, double-check in your browser’s dev tools (F12) that:

• The span element actually has the tooltip class applied (inspect the element and look at the class list)
• The title attribute on the span contains the correct PMS value (e.g., title="PMS 186")

If either of these is missing, fix that first—no script will work if the basics aren’t right.

2. Use Event Delegation for Dynamic Elements #

Stencil themes often load product options (like color swatches) dynamically after the initial page load. Direct event listeners won’t catch these elements, so we’ll use event delegation on a parent element that exists from page load (like document or a closer container):

Vanilla JavaScript Solution #

Add this script to your theme’s theme.js or a custom JS file:

// Create a reusable tooltip element once
const tooltipElement = document.createElement('div');
tooltipElement.classList.add('custom-pms-tooltip');
document.body.appendChild(tooltipElement);

// Listen for mouseover events on any .tooltip element (even dynamic ones)
document.addEventListener('mouseover', (e) => {
  const swatch = e.target.closest('.tooltip'); // Use closest in case swatch has child elements
  if (swatch) {
    const pmsValue = swatch.getAttribute('title');
    if (!pmsValue) return;

    // Set tooltip content and position it near the swatch
    tooltipElement.textContent = `PMS: ${pmsValue}`;
    const swatchRect = swatch.getBoundingClientRect();
    
    tooltipElement.style.left = `${swatchRect.left + window.scrollX}px`;
    tooltipElement.style.top = `${swatchRect.top + window.scrollY - tooltipElement.offsetHeight - 8}px`;
    tooltipElement.style.display = 'block';
  }
});

// Hide tooltip when mouse leaves the swatch
document.addEventListener('mouseout', (e) => {
  if (e.target.closest('.tooltip')) {
    tooltipElement.style.display = 'none';
  }
});

Add CSS for the Tooltip #

Put this in your theme’s theme.css or custom CSS file to style the tooltip:

.custom-pms-tooltip {
  position: absolute;
  background-color: #222;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 10000;
  display: none;
  pointer-events: none; /* Prevents tooltip from blocking mouse events */
}

3. Check for Conflicting Scripts #

Sometimes Stencil themes include built-in scripts or plugins that override default hover behavior. To rule this out:

• Temporarily disable any third-party tooltip plugins your theme might be using
• Check if any other scripts are calling event.preventDefault() or event.stopPropagation() on mouse events (this could block your tooltip trigger)

4. Test with a Static Element First #

If the dynamic approach still isn’t working, test with a static .tooltip span somewhere on the page (like in the product description) to confirm your script works when the element exists on page load. If it works there, the issue is definitely with dynamic element loading, and the event delegation method above should fix it.

内容的提问来源于stack exchange，提问作者E Koop