鼠标悬停到class为athlete-name的元素时如何显示带文本的提示窗口

问题原因 #

你原有代码无法生效主要有3个核心问题：

• 选择器逻辑错误：+是相邻兄弟选择器，要求两个元素为同一父级下紧挨着的同级元素，你代码里的#message-hide和.athlete-name既不属于同一父级，也不是相邻同级，选择器完全匹配不到目标元素
• 标识符不匹配：HTML中提示框用的是id="message-hide"，CSS里写的.message-hide是类选择器，二者无法对应
• 全局放置的提示框无法定位到对应运动员名称的旁边，也没法区分不同运动员的自定义提示内容

正确实现方案 #

提供两种常用的实现方式，可根据需求选择：

方案1：纯CSS实现（无需JS，推荐简单提示场景） #

方式A：用伪元素实现，无需额外HTML标签

给athlete-name元素新增data-tooltip属性存储对应的提示文本，通过CSS伪元素读取属性内容展示：

<td class="athlete-name" style="padding-right: .75rem !important;" data-tooltip="你要展示的指定提示内容">
    ElMaestroDeToMare
</td>

对应的CSS代码：

.athlete-name {
    @include set_font($smallfontsize);
    font-weight: $bold;
    color: $font_color;
    /* 新增相对定位作为提示框的定位父级 */
    position: relative;
    cursor: pointer;
}

/*  hover 时显示提示框 */
.athlete-name:hover::after {
    /* 读取元素的data-tooltip属性值作为提示内容 */
    content: attr(data-tooltip);
    position: absolute;
    /* 可根据需求调整提示框位置，这里默认放在名称右侧 */
    left: 100%;
    top: 0;
    margin-left: 8px;
    padding: 4px 8px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: #000000;
    white-space: nowrap;
    z-index: 999;
}

方式B：内嵌提示标签，支持复杂内容

如果提示框需要放链接、图片等复杂内容，可以直接在td内部加提示标签：

<td class="athlete-name" style="padding-right: .75rem !important; position: relative;">
    ElMaestroDeToMare
    <span class="tooltip">
        自定义提示内容<br>
        支持换行、<a href="#">链接</a>等复杂格式
    </span>
</td>

对应的CSS代码：

.athlete-name {
    @include set_font($smallfontsize);
    font-weight: $bold;
    color: $font_color;
    position: relative;
    cursor: pointer;
}

/* 提示框默认隐藏 */
.athlete-name .tooltip {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 8px;
    padding: 4px 8px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: #000000;
    z-index: 999;
}

/* hover时显示 */
.athlete-name:hover .tooltip {
    display: block;
}

方案2：JS实现（适合复杂交互场景） #

如果需要实现跟随鼠标移动、延迟显示/隐藏等复杂交互，可以用JS实现：

// 给所有运动员名称绑定事件
const athleteNames = document.querySelectorAll('.athlete-name')
athleteNames.forEach(nameEl => {
    // 鼠标移入显示提示
    nameEl.addEventListener('mouseenter', e => {
        const tipEl = document.createElement('div')
        tipEl.className = 'custom-tooltip'
        // 可直接读取data-tooltip属性，也可以自定义内容
        tipEl.textContent = nameEl.dataset.tooltip
        // 定位到鼠标位置
        tipEl.style.position = 'fixed'
        tipEl.style.left = `${e.clientX + 10}px`
        tipEl.style.top = `${e.clientY + 10}px`
        tipEl.style.zIndex = '999'
        // 自定义其他样式
        tipEl.style.padding = '4px 8px'
        tipEl.style.background = '#fff'
        document.body.appendChild(tipEl)
    })
    // 鼠标移出移除提示
    nameEl.addEventListener('mouseleave', () => {
        document.querySelector('.custom-tooltip')?.remove()
    })
})

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