如何在鼠标悬停时显示弹出文本？

Question

如何在鼠标悬停时显示弹出文本？

16

我希望当我将鼠标悬停在图像上时，可以通过弹出文本框加载来自 DIV 标签的某些内容。当我将鼠标移开图像时，弹出框应该消失，当我再次将鼠标悬停在图像上时，文本框中的内容应该显示。我将使用 HTML、JQuery、JS 来实现这个功能。如果您能提供一个使用 JQuery load() 方法的解决方案，那将非常有用。请告诉我您的回应。

- surajR

请尝试使用jQuery UI对话框方法。您需要尝试解决问题，然后我们可以帮助您调试/解决遇到的问题。 - nbrooks

你尝试过什么？否则去谷歌搜索一下，你会得到很多jQuery工具提示。 - Mr. Alien

1

有使用jQuery的load()方法的原因吗？你不能将div的CSS设置为隐藏，然后在鼠标悬停在图像上时显示它吗？ - Matthias

@Matthias 我想使用load()，因为我希望页面性能高。只有必要的内容应该被加载。 - surajR

5个回答

13

您也可以尝试一些非常简单的东西，比如：

<acronym title="pop-up text"><img src=...></acronym>

- cbspencer

2

或者<abbr>，但是同样的事情。 - dlchambers

5

您可以使用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;
}

- GG.

3

你可以给图片添加 title 属性。不需要任何额外的标签或样式，只需一个属性。

- Solomon Ucko

1

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

如果你将鼠标悬停在文本上方，会弹出另一个文本。

- Josh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ryan Wheale · Accepted Answer

或者，不使用JavaScript：

<div class="tooltip-wrap">
  <img src="/some/image/file.jpg" alt="Some Image" />
  <div class="tooltip-content">
    Here is some content for the tooltip
  </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;
  min-width: 10rem;
}
.tooltip-wrap:hover .tooltip-content {
  display: block;
}