[英]Textbox 'popup' display on mouseover/hover for CSS/Javascript
我有一个带有文本的html td
元素。 我想要它,因此您可以将鼠标悬停在该元素上,并在活动页面/元素顶部显示一个文本框,以说明td标签内容的含义。 某种阐述。 就像<abbr>
标签一样。
可以用CSS或Javascript完成吗?
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工具提示插件)具有带有更多选项的解决方案。
标记示例
<td id="1">..</td>
<td id="2">..</td>
<td id="thisiswhatiwanttohaveahover"><div class="tooltip hidden"></div></td>
CSS样式
.visible {
display:block;
}
.hidden {
display:none;
}
您可以
$('#thisiswhatiwanttohaveahover').hover(function() {
if ($(this + ' .tooltip').hasClass('hidden')) {
$(this + ' .tooltip').removeClass('hidden');
$(this + ' .tooltip').addClass('visible');
}
if ($(this + ' .tooltip').hasClass('visible')) {
$(this + ' .tooltip').removeClass('visible');
$(this + ' .tooltip').addClass('hidden');
}
});
希望这可以帮助..
我以前使用过Tooltip JS 。 它运行得非常好,我认为这对您有好处。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.