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

Question

当我将鼠标悬停在图像上时，我想从 DIV 标签加载一些内容作为弹出文本。当我鼠标离开该图像时，弹出窗口应该消失，当我再次将鼠标悬停在图像内容上时，应该显示为弹出文本。我为此使用 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">
    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;
}