javascript 仅使用 HTML 和 CSS 制作一个简单的工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23688025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a simple tooltip with only HTML and CSS
提问by khaverim
I want my tooltip element (the <span>) to appear above everything on the pagebut still relative to its parent element(the <td>). I'm trying with JS but would like a no-script solution.
我希望我的工具提示元素 (the <span>) 出现在页面上的所有内容之上，但仍相对于其父元素(the <td>)。我正在尝试使用 JS，但想要一个无脚本解决方案。
JS to show/hide the <span>:
JS 显示/隐藏<span>：
window.AETid = "AE";
function tooltip(tid) {
document.getElementById(tid).style.display="block";
}
function hideTooltip(tid) {
document.getElementById(tid).style.display="none";
}
HTML:
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>
CSS for .tooltip:
CSS 用于.tooltip：
.ht { position: relative; }
.tooltip {
color: #ff0000;
display: none;
z-index: 100;
position: absolute;
right:0px;
bottom: 0px;
}
Currently, the tooltip appears as expected when I hover over the <td>, but it appears within the element, thus changing the size of the <td>and thus the <tr>and thus the whole dang <table>. I want the tooltip to appear, well, like tooltips do: above and not effecting the rest of the page. z-index doesn't seem to do it alone in my case...
目前，出现提示如预期，当我将鼠标悬停在<td>，但它出现在元素中，从而改变的大小<td>，因而<tr>从而对整个党<table>。我希望工具提示出现，就像工具提示一样：在上面而不影响页面的其余部分。在我的情况下，z-index 似乎不是单独完成的......
Using position: fixedinstead of absoluteon the tooltip <span>kept the element from interrupting the DOM, but literally positioned it after everything else on the page (at the bottom)
在工具提示上使用position: fixed而不是使元素不会中断 DOM，但实际上将其定位在页面上的其他所有内容之后（在底部）absolute<span>
All help is greatly appreciated
非常感谢所有帮助
回答by khaverim
I found a method to make a very lightweight tooltip with no JS!
我找到了一种无需 JS 即可制作非常轻量级工具提示的方法！
HTML:
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: (must be in this order)
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;
}
Totally awesome and props to this guy!
真是太棒了，这家伙的道具！
回答by Popmedic
Just curious what is wrong with the title attribute of the td???
只是好奇 td 的 title 属性有什么问题？？？
<td title="If this option is selected, e-mail reminders will be sent to the client before each appointment.">
Send reminders?
</td>回答by dota2pro
just use abbr tag ?
只使用 abbr 标签？
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p title="Free Web tutorials">W3Schools.com</p>