自定义JavaScript ToolTip的CSS行为异常问题排查

问题背景 #

在WordPress/WooCommerce站点中实现了两个基于onmouseover/onmouseout事件的ToolTip：

• 关联.product-remove区域的ToolTip（ID：addon_remove_link）
• 关联.product-quantity区域的ToolTip（ID：addon_quantity）

经断点调试确认：两个元素的事件均正常触发，popup元素定位正确，show类的增删操作无误，但仅第二个ToolTip能正常显示，第一个完全不出现，怀疑是样式冲突导致。

排查思路 #

• 检查父元素溢出设置：查看.product-remove元素的overflow属性，若为hidden会截断外部定位的popup，需改为visible或调整popup的定位坐标（比如将bottom:125%改为top:100%）。
• 验证层级覆盖问题：WooCommerce或主题样式可能给页面其他元素设置了更高的z-index，导致第一个popup被遮挡。尝试给.popup .popuptext增加更高的z-index值（如z-index: 9999），同时确保其父元素未创建独立层级上下文。
• 排查CSS选择器优先级：打开浏览器开发者工具查看第一个popup的计算样式，确认visibility属性是否被更高优先级的选择器强制设为hidden。若存在冲突，修改自定义CSS的选择器（比如用#addon_remove_link .popuptext.show这种带ID的高优先级选择器）。
• 测试定位与视口可见性：第一个popup的bottom:125%可能导致它移出当前视口，临时修改为bottom: 20px或top: 10px验证是否能显示，再调整合适的定位值。
• 排除缓存与渲染问题：强制刷新浏览器缓存（Ctrl+Shift+R），清除WordPress站点缓存，同时在不同浏览器测试，排除缓存或特定浏览器的渲染异常。

实现代码 #

JavaScript

function togglePopup(element, onoff) {
    var popup = document.getElementById(element.id + "_popup");
    if (popup) {
        if (onoff) {
            popup.classList.add("show");
        }
        else {
            popup.classList.remove("show");
        }
    }
}

CSS

.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

HTML

<br><br>
<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
   <tbody>
      <tr class="woocommerce-cart-form__cart-item cart_item">
         <td class="product-remove">
            <div class="popup" onmouseover="togglePopup(this, true);" onmouseout="togglePopup(this, false);" id="addon_remove_link">
               <label class="remove">&times;</label>
               <span class="popuptext" id="addon_remove_link_popup">To remove add-on items, you must remove associated products</span>
            </div>
         </td>
         <td class="product-quantity" data-title="Quantity">
            <div class="quantity popup" onmouseover="togglePopup(this, true);" onmouseout="togglePopup(this, false);" id="addon_quantity">
               <label class="screen-reader-text" for="quantity_6658f8f611307">Thread - GutermannMatching thread for selected items quantity</label>
               <input readonly type="number" id="quantity_6658f8f611307" class="input-text qty text" name="cart[8f818faae39eca624255ff021f2f2afb][qty]" value="1" aria-label="Product quantity" size="4" min="0" max="100" step="1" placeholder="" inputmode="" autocomplete="off" />
               <span class="popuptext" id="addon_quantity_popup">To change add-on quantities, you must add/remove associated products</span>
            </div>
         </td>
      </tr>
   </tbody>
</table>

内容的提问来源于stack exchange，提问作者Venk Reddy