Geek asks and answers

How to display popup text on hover?

I want to download some content from a DIV tag as pop-up text when I hover over an image. When I get away from this image, the pop should disappear, and when I hover over the contents of the image again, you will see it as a pop-up text. For this I use HTML, jQuery, JS. This will be very useful if I get a solution using the jquery load () method. Let me know ur answer

+5
source share
4 answers

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;
}
+13
source

You can use Twitter Bootstrap with a tooltip plugin .

, 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

You can also try something very simple:

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

You can add an attribute titleto the image. You do not need any additional tags or style, just an attribute.

0
source

More articles:


All Articles