How to display pop up text on mouse hover?

Question

I want to load some content from a DIV tag as pop up text when i hover over an image. When i mouse leave from that image pop should disappear and when i again mouse over image content should show as pop up text. I am using HTML, Jquery, JS for this. It will be very useful if i get a solution using jquery load() method. Let me know ur response.

Answer 1

You can add the title attribute to the image. You don't need any extra tags or styling, just an attribute.

Answer 2

Or, without 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>

And this 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 3

You can use Twitter Bootstrap with the tooltip plugin.

If you want just the plugin, you can build your own Bootstrap with the plugin only.

Finally if you want to stylize your tooltip, use CSStooltip.com.

Example :

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

You could also try something very simple like:

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