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

You could also try something very simple like:

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

Answer 3

tooltip pluginで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;
}