Question

我希望我的工具提示元素（<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，但确切地将其定位在页面上的所有其他内容之后（位于底部）

非常感谢所有帮助

Answer 1

我找到了一种方法来制作一个没有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！

Answer 2

只使用abbr标签吗？

<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p title="Free Web tutorials">W3Schools.com</p>

Answer 3

只是好奇td ???的标题属性有什么问题

<td title="If this option is selected, e-mail reminders will be sent to the client before each appointment.">
  Send reminders?
</td>

Answer 4

尝试此方法既简单又紧凑，我自己做的

<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>

Answer 5

顶部工具提示的解决方案（即使没有可用空间也总是如此）

.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>
</>

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

5 个答案: