如何在鼠標懸停時顯示彈出文本？

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

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

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>

如果將鼠標懸停在文本上，則會彈出另一個。