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

Question

当我将鼠标悬停在图片上时，我希望将DIV标记中的某些内容加载为弹出文本。当我从鼠标离开该图像时，pop会消失，当我再次将鼠标悬停在图像上时，内容应显示为弹出文本。我正在使用HTML，Jquery，JS。如果我使用jquery load（）方法获得解决方案，那将非常有用。让我知道你的反应。

Answer 1

或者，没有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;
}

Answer 2

你也可以尝试一些非常简单的事情：

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

Answer 3

您可以将Twitter Bootstrap与the tooltip plugin一起使用。

如果您只想要插件you can build your own Bootstrap with the plugin only。

最后，如果您想要对工具提示进行样式化，请使用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;
}

Answer 4

您可以将title属性添加到图像中。您不需要任何额外的标签或样式，只需要一个属性。

Answer 5

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

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