CODEWITHSUNDEEP
javascriptjqueryhtmlcsstooltip
surajR
surajR

Reputation: 573

How to display pop up text on mouse hover?

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.

Upvotes: 16

Views: 106559

Answers (5)

Ryan Wheale
Ryan Wheale

Reputation: 28390

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

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;
  min-width: 10rem;
}
.tooltip-wrap:hover .tooltip-content {
  display: block;
}

Upvotes: 22

Josh
Josh

Reputation: 11

<p id="icon">Text to hover over</p>
<p id="info" style="display: none">Text to popup</p>

Then, finish it with 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>

If you hover over the text, another will popup.

Upvotes: 1

Solomon Ucko
Solomon Ucko

Reputation: 6109

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

Upvotes: 4

cbspencer
cbspencer

Reputation: 171

You could also try something very simple like:

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

Upvotes: 14

GG.
GG.

Reputation: 21844

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 :

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

Upvotes: 5

Related Questions