web-dev-qa-db-ja.com

マウスホバーでポップアップテキストを表示するにはどうすればよいですか？

画像にカーソルを合わせると、DIVタグのコンテンツをポップアップテキストとしてロードしたいと思います。その画像からマウスを離すとポップが消え、もう一度マウスオーバーすると画像コンテンツがポップアップテキストとして表示されます。これにはHTML、Jquery、JSを使用しています。 jquery load（）メソッドを使用してソリューションを取得すると非常に便利です。私にあなたの応答を教えてください。

javascriptjqueryhtmlcsstooltip
8
surajR

または、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;
}
15
Ryan Wheale

次のような非常に単純なものを試すこともできます。

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

Twitter Bootstrap と ツールチッププラグイン を使用できます。

プラグインだけが必要な場合は、 独自のBootstrapプラグインのみで を構築できます。

最後に、ツールチップを定型化する場合は、 CSStooltip.com を使用します。

例：

enter image description here

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;
}
3
GG.
<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>

テキストにカーソルを合わせると、別のテキストがポップアップ表示されます。

0
Josh

title属性を画像に追加できます。追加のタグやスタイルは必要ありません。属性だけが必要です。

0
Solomon Ucko