悬停在表格单元格边框上时显示工具提示答案

【问题标题】：Show tooltip when hovering over table cell border悬停在表格单元格边框上时显示工具提示
【发布时间】：2016-10-12 04:27:08
【问题描述】：

当用户将鼠标悬停在第一个td 单元格的左边框 上时，我试图显示一个工具提示。我的代码如下（JSFiddle here）：

HTML

<table class="cart"> 
    <tr> 
        <th id="pos">Pos</th> 
        <th id="name">Product</th> 
        <th id="price">Price</th> 
    </tr> 
    <tbody> 
        <tr>
            <td>
              <span>New visual experience!</span>
            </td>
            <td>
                1
            </td>
            <td>19.99</td>
        </tr>
        <tr>
            <td>
              <span>Inject music directly into your ears!</span>
            </td>
            <td>
                2
            </td>
            <td>19.99</td>
        </tr>
    </tbody> 
</table>

CSS

table tr td{
    border: 1px solid blue;
}
.cart { width: 100%; }

td span {
    display: none;
    color: #000;
    text-decoration: none;
    padding: 3px;
    cursor: arrow;
}

td:hover span {
    display: block;
    position: absolute;
    background-color: #FFF;
    border: 1px solid #CCC;
    margin: 2px 10px;
    cursor: pointer;
}

我尝试了很多方法，但工具提示一直出现在整个单元格上，而不是像我想要的那样出现在左边框上。有人可以帮忙吗？

【问题讨论】：

您可以更改任何 html 标记吗？
我猜你可以，只要工具提示出现在边框上...我想不通。
越过左边框？你的意思是基本上在你悬停的字段上方然后左对齐？只需使用top 和left 调整这些
只有当光标悬停在第一个单元格的左边框上时，才会出现工具提示。无处可去。
“越过左边界”到底是什么意思？你能解释一下吗？如果我从顶部或右侧或底部悬停单元格，则工具提示不应该出现，只有当我用鼠标光标从左侧进入单元格时才会出现？

标签： html css

【解决方案1】：

我会在第一个 <td> 内添加一个宽度与边框大小相同（或稍大）的绝对定位 div，然后使用它来监听悬停事件。

https://jsfiddle.net/x1c3hxyx/4/

【讨论】：