我希望我的工具提示元素(<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";
}
Run Code Online (Sandbox Code Playgroud)
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>
Run Code Online (Sandbox Code Playgroud)
CSS用于.tooltip
:
.ht { position: relative; }
.tooltip {
color: #ff0000;
display: none;
z-index: 100;
position: absolute;
right:0px;
bottom: 0px;
}
Run Code Online (Sandbox Code Playgroud)
目前,出现提示,当我将鼠标悬停在预期的<td>
,但它出现在元素中,从而改变的大小<td>
,因而<tr>
从而对整个党 …