当我将鼠标悬停在图像上时，我想从 DIV 标记加载一些内容作为弹出文本。当我鼠标离开该图像时，弹出应该消失，当我再次将鼠标悬停在图像内容上时，应该显示为弹出文本。我为此使用 HTML、Jquery、JS。如果我使用 jquery load() 方法获得解决方案，这将非常有用。让我知道你的回应。
问问题
70863 次
5 回答
18
或者，没有 javascript：
<div class="tooltip-wrap">
<img src="/some/image/file.jpg" alt="Some Image" />
<div class="tooltip-content">
<p>Here is some content for the tooltip</p>
</div>
</div>
这个CSS：
.tooltip-wrap {
position: relative;
}
.tooltip-wrap .tooltip-content {
display: none;
position: absolute;
bottom: 5%;
left: 5%;
right: 5%;
background-color: #fff;
padding: .5em;
}
.tooltip-wrap:hover .tooltip-content {
display: block;
}
于 2012-07-27T08:03:43.587 回答
8
您也可以尝试一些非常简单的方法，例如：
<acronym title="pop-up text"><img src=...></acronym>
于 2016-06-02T18:38:42.330 回答
4
您可以将Twitter Bootstrap与工具提示插件一起使用。
如果你只想要插件，你可以只用插件构建你自己的 Bootstrap。
最后，如果您想对工具提示进行风格化，请使用CSStooltip.com。
例子 ：
span.tooltip:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent #FFFFFF transparent transparent;
top: 11px;
left: -24px;
}
于 2012-07-27T07:54:37.163 回答
0
您可以将title属性添加到图像。您不需要任何额外的标签或样式，只需要一个属性。
于 2017-02-01T23:42:59.940 回答
0
<p id="icon">Text to hover over</p>
<p id="info" style="display: none">Text to popup</p>
然后，用 javascript 完成它。
<script>
var e = document.getElementById('icon');
e.onmouseover = function() {
document.getElementById('info').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('info').style.display = 'none';
}
</script>
如果将鼠标悬停在文本上，则会弹出另一个。
于 2019-08-03T12:41:31.647 回答