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

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与工具提示插件一起使用。

如果您只想要插件，您可以仅使用插件构建您自己的 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;
}