我希望我的工具提示元素(<span>
)在页面上的所有内容上方显示,但仍然相对于其父元素({{1} })。我正在尝试使用JS,但想要一个无脚本的解决方案。
JS显示/隐藏<td>
:
<span>
HTML:
window.AETid = "AE";
function tooltip(tid) {
document.getElementById(tid).style.display="block";
}
function hideTooltip(tid) {
document.getElementById(tid).style.display="none";
}
<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>
的CSS:
.tooltip
目前,当我将鼠标悬停在.ht { position: relative; }
.tooltip {
color: #ff0000;
display: none;
z-index: 100;
position: absolute;
right:0px;
bottom: 0px;
}
上时,工具提示会按预期显示,但它会显示在元素中,从而会更改<td>
的大小,从而更改<td>
的大小整个人<tr>
。我希望工具提示出现,就像工具提示一样:上面而不影响页面的其余部分。在我的案例中,z-index似乎并不是单独做的......
在工具提示<table>
上使用position: fixed
代替absolute
可以防止元素中断DOM,但确切地将其定位在页面上的所有其他内容之后(位于底部)
非常感谢所有帮助
答案 0 :(得分:14)
我找到了一种方法来制作一个没有JS的非常轻量级的工具提示!
HTML:
<td class="ht">Send reminders?
<span class="tooltip">this is the tooltip alshdgwh gahfguo
wfhg fghwoug wugw hgrwuog hwaur guoarwhg rwu</span>
</td>
CSS :(必须按此顺序)
.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;
}
非常棒,并支持this guy!
答案 1 :(得分:4)
只使用abbr标签吗?
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p title="Free Web tutorials">W3Schools.com</p>
答案 2 :(得分:3)
只是好奇td ???的标题属性有什么问题
<td title="If this option is selected, e-mail reminders will be sent to the client before each appointment.">
Send reminders?
</td>
答案 3 :(得分:0)
尝试此方法既简单又紧凑, 我自己做的
<link href="https://firebasestorage.googleapis.com/v0/b/tooltipcss.appspot.com/o/tooltip.css?alt=media&token=0ce443aa-0970-4167-8d7d-7abdcd2edf71" rel="stylesheet">
<span class="info">Text<span class="tooltip">MSG</span></span>
答案 4 :(得分:0)
顶部工具提示的解决方案(即使没有可用空间也总是如此)
.ht:hover .tooltip {
display:block;
}
.ht{
position: relative;
}
.tooltip {
display: none;
color: red;
z-index: 1;
position: absolute;
top: -50%;
transform: translatey(-50%);
}
<br><br><br><br>
<br>
<br>
<div class="ht">Send reminders? <br/> xaxaxa <br/> xaxaxa <br/> xaxaxa
<span class="tooltip">this is the tooltip alshdgwh gahfguo
wfhg fghwoug wugw hgrwuog hwaur guoarwhg <br/> sdfaasdfrwu<br/> sdfaasdfrwu<br/> sdfaasdfrwu</span>
</>