仅使用 HTML 和 CSS 制作简单的工具提示答案

【问题标题】：Making a simple tooltip with only HTML and CSS仅使用 HTML 和 CSS 制作简单的工具提示
【发布时间】：2014-07-04 11:28:55
【问题描述】：

我希望我的工具提示元素（<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，但实际上将其放置在页面上其他所有内容之后（在底部）

非常感谢所有帮助

【问题讨论】：

位置必须是absolute 或fixed。现在的位置是相对的，这将影响其他relative或static定位元素的位置
我在父级上使用relative 并在工具提示<span> 上使用absolute 进行了尝试（并编辑了问题以澄清）。工具提示仍在中断 DOM 流。使用fixed 使其位于页面上其他所有内容之后

标签： javascript html css tooltip

【解决方案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！

【讨论】：

通常不喜欢别人选择别人的答案，即使你确实提供了道具，但是在将用户的代码缩减到最基本的部分时，你已经让这变得更有价值。干得好。

【解决方案2】：

只使用缩写标签？

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

【讨论】：

我喜欢它的简单性，而且它可以胜任。刚用过。谢谢！
@dota2pro 我非常感谢这个答案。谢谢！

【解决方案3】：

只是好奇td的title属性有什么问题？？？

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

试试这个简单紧凑的，我自己做的

.info:hover .tooltip {
  color: red;
  visibility: visible;
  opacity: 1;
  transition: opacity 1s
}
.tooltip {
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s
}
}
.tooltip:hover {
  visibility: visible
}

.info {
cursor: help
}

&lt;span class="info"&gt;Text&lt;span class="tooltip"&gt;MSG&lt;/span&gt;&lt;/span&gt;

【讨论】：

这本质上是一个仅链接的答案，因为这里没有实际的 CSS。