javascript - 文本框 'popup' 在 CSS/Javascript 的鼠标悬停/悬停时显示

Question

我有一个 html td里面有文字的元素。我想要它，这样您就可以将鼠标悬停在该元素上，并在事件页面/元素的顶部显示一个文本框，解释该 td 标签的内容的含义。某种阐述。喜欢 <abbr>标签。

这可以用 CSS 或 Javascript 完成吗？

Answer 1

这可以通过 CSS 实现，也可以通过 javascript 实现。创建一个包含元素的表格:

<table>
<tr><td>
    <a href="#">Info
        <div class="tooltipcontainer">
            <div class="tooltip">Here some info</div>
        </div>
    </a>
</td></tr>
</table>

CSS:

/* Container is necessary because td cannot be positioned relative */
td .tooltipcontainer {
    position: relative;
}
td .tooltip {
    display: none;
    position: absolute;
    /* More positioning, heigh, width, etc */
}
td a:hover .tooltip {
    display: block;
}

当您将鼠标悬停在“信息”上时，它会在 div 中显示带有 class='tooltip' 的文本。 JavaScript(例如任何 jQuery 工具提示插件)有更多选项的解决方案。