搜索输入操作后Tooltip仅显示容器无内容问题求助

云上老周

2026-6-17

问题解决：搜索后Tooltip仅显示容器无内容

问题原因

你的CSS hover选择器存在层级错误，无法正确触发Tooltip内容的显示逻辑：.block-img:hover .tooltiptext-mercado这个选择器无法匹配到目标元素——.tooltiptext-mercado是.tooltip-mercado的子元素，并非.block-img的直接子元素。即使Tooltip容器能显示，内容的显示规则没有被正确触发，导致看起来只有容器样式。

另外，.tooltip-mercado未设置position: relative，会导致Tooltip的绝对定位参考错误的父元素，进一步加剧显示问题。

修复方案

修改CSS代码

修正hover选择器，补充中间的.tooltip-mercado层级
给.tooltip-mercado添加相对定位，作为Tooltip的定位参考容器
移除重复的opacity设置，精简代码

修改后的关键CSS代码：

.tooltip-mercado {
    position: relative; /* 添加相对定位，确保Tooltip定位参考正确 */
}

.tooltip-mercado .tooltiptext-mercado {
    display: block;
    visibility: hidden;
    opacity: 0;
    width: 250px; 
    background-color: black;
    color: #fff;
    text-align: left;
    padding: 15px;
    border-radius: 5px;
    position: absolute;
    left: 100%; 
    top: 50%;
    transform: translateY(-50%); 
    z-index: 9999; 
    transition: opacity 0.3s, visibility 0.3s;
    margin-left: 10px;
    box-sizing: border-box;
    white-space: nowrap;
    border: 1px solid #ddd;
}

/* 修正hover选择器，匹配正确的DOM层级 */
.block-img:hover .tooltip-mercado .tooltiptext-mercado{
    visibility: visible !important;  
    opacity: 1 !important; 
}