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

时间:2014-05-15 20:29:36

标签: javascript html css tooltip

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

非常感谢所有帮助

5 个答案:

答案 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>
</>