Javascript 如何在鼠标悬停时显示弹出文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11683620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display pop up text on mouse hover?
提问by surajR
I want to load some content from a DIV tag as pop up text when i hover over an image. When i mouse leave from that image pop should disappear and when i again mouse over image content should show as pop up text. I am using HTML, Jquery, JS for this. It will be very useful if i get a solution using jquery load() method. Let me know ur response.
当我将鼠标悬停在图像上时，我想从 DIV 标签加载一些内容作为弹出文本。当我鼠标离开该图像时，pop 应该消失，当我再次将鼠标悬停在图像内容上时，应该显示为弹出文本。我为此使用 HTML、Jquery、JS。如果我使用 jquery load() 方法获得解决方案，这将非常有用。让我知道你的回应。
回答by Ryan Wheale
Or, without javascript:
或者，没有 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>
And this CSS:
这个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;
}
回答by cbspencer
You could also try something very simple like:
你也可以尝试一些非常简单的事情，比如：
<acronym title="pop-up text"><img src=...></acronym>
回答by GG.
You can use Twitter Bootstrapwith the tooltip plugin.
您可以将Twitter Bootstrap与工具提示插件一起使用。
If you want just the plugin, you can build your own Bootstrap with the plugin only.
如果您只需要插件，则可以仅使用插件构建自己的 Bootstrap。
Finally if you want to stylize your tooltip, use CSStooltip.com.
最后，如果您想样式化您的工具提示，请使用CSStooltip.com。
Example :
例子 ：
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;
}
回答by Solomon Ucko
You can add the titleattribute to the image. You don't need any extra tags or styling, just an attribute.
您可以将title属性添加到图像。您不需要任何额外的标签或样式，只需一个属性。
回答by Josh
<p id="icon">Text to hover over</p>
<p id="info" style="display: none">Text to popup</p>
Then, finish it with javascript.
然后，用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>
If you hover over the text, another will popup.
如果您将鼠标悬停在文本上，则会弹出另一个。
