仅使用HTML和CSS制作简单的工具提示 [英] Making a simple tooltip with only HTML and CSS

问题描述

我希望我的工具提示元素（< span> ）显示为超过网页上的所有内容，但仍然相对于父元素（< td> ）。

JS显示/隐藏< span> $ b $

  window.AETid =AE; 
 
函数工具提示（tid）{
 document.getElementById（tid）.style.display =block; 
} 
 
函数hideTooltip（tid）{
 document.getElementById（tid）.style.display =none; 
} 
  

HTML：

 < td class =htonmouseover =tooltip（window.AETid）;的onmouseout = hideTooltip（window.AETid）; > 
发送提醒？ 
< span class =tooltipid =AE>如果选择此选项，电子邮件提醒将在每次约会前发送给客户。< / span> 
< / td> 
  

CSS for .tooltip ：

  .ht {position：relative; } 
 .tooltip {
 color：＃ff0000; 
 display：none; 
 z-index：100; 
位置：绝对; 
 right：0px; 
 bottom：0px; 
} 
  

目前，当我将鼠标悬停在<$ c $上时， c>< td> ，但它出现在元素中，因此改变了< td> 的大小，从而改变了< tr> ，因此整个dang < table> 。我希望工具提示出现，就像工具提示一样：在上面而不是影响页面的其余部分。在我的情况下，z-index似乎并没有单独做到这一点...

使用 position：fixed 改为工具提示< span> 时，绝对保持元素不会中断DOM，但实际上将其定位在其他所有元素之后在页面上（在底部）

所有帮助非常感谢

解决方案

HTML：

<$ p $

我发现了一个非常轻量级的工具提示p> < td class =ht>发送提醒？
< span class =tooltip>这是工具提示alshdgwh gahfguo
wfhg fghwoug wugw hgrwuog hwaur guoarwhg rwu< / span>
< / td>


CSS：（必须按此顺序）

  .ht：hover .tooltip {
 display：block; 
} 
 
 .tooltip {
 display：none; 
颜色：红色; 
 margin-left：28px; / *将工具提示向右移动* / 
 margin-top：15px; / *将其移下* / 
位置：绝对; 
 z-index：1000; 
} 
  

完全可怕并支持这家伙！

I want my tooltip element (the <span>) to appear above everything on the page but still relative to its parent element (the <td>). I'm trying with JS but would like a no-script solution.

JS to show/hide the <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>

CSS for .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...

Using position: fixed instead of absolute on the tooltip <span> kept the element from interrupting the DOM, but literally positioned it after everything else on the page (at the bottom)

All help is greatly appreciated

解决方案

I found a method to make a very lightweight tooltip with no 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: (must be in this order)

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

这篇关于仅使用HTML和CSS制作简单的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！