javascript - 仅使用 HTML 和 CSS 制作一个简单的工具提示

Question

我希望我的工具提示元素(<span>)出现在页面上所有内容之上，但仍然相对于其父元素(<td>)。我正在尝试使用 JS，但想要一个无脚本的解决方案。

JS 显示/隐藏 <span> :

window.AETid = "AE";

        function tooltip(tid) {
         document.getElementById(tid).style.display="block";
        }

        function hideTooltip(tid) {
         document.getElementById(tid).style.display="none";
        }

HTML:

<td class="ht" onmouseover="tooltip(window.AETid);" onmouseout="hideTooltip(window.AETid);">
Send reminders?
<span class="tooltip" id="AE">If this option is selected, e-mail reminders will be sent to the client before each appointment.</span>
</td>

.tooltip 的 CSS :

.ht { position: relative; }
    .tooltip {
        color: #ff0000;
        display: none;
        z-index: 100;
        position: absolute;
        right:0px;
        bottom: 0px;
    }

目前，当我将鼠标悬停在 <td> 上时，工具提示会按预期显示, 但它出现在元素内，从而改变了 <td> 的大小因此 <tr>因此整个党<table> .我希望工具提示出现，好吧，就像工具提示一样:在上方并且不影响页面的其余部分。就我而言，z-index 似乎并不能单独完成...

使用 position: fixed而不是 absolute在工具提示上 <span>保持元素不中断 DOM，但实际上将其定位在页面上的其他所有内容之后(在底部)

非常感谢所有帮助

Answer 1

我找到了一种无需 JS 即可制作非常轻量级的工具提示的方法!

.ht:hover .tooltip {
  display:block;
}

.tooltip {
  display: none;
    color: red;
    margin-left: 28px; /* moves the tooltip to the right */
    margin-top: 15px; /* moves it down */
    position: absolute;
    z-index: 1000;
}

<table>
  <td class="ht">Send reminders?
  <span class="tooltip">this is the tooltip alshdgwh gahfguo 
  wfhg fghwoug wugw hgrwuog hwaur guoarwhg rwu</span>
  </td>
</table>

非常棒，支持 this guy !