CODEWITHSUNDEEP
jquery
smack-a-bro
smack-a-bro

Reputation: 741

jQuery popup image on hover with text

I have this bit of code that I've actually found here on Stack but cannot find out how to add text below the popup image when I hover.

Here's the code:

    <style type="text/css">
      .popover1 {top: 10px; left: 10px; position: relative;}
      .big_img1 {z-index: 999; height: 250px; position: absolute;}
    </style>

    <div id="hover-div">
       <img class="popover1" style="height: 100px;" src="http://transolid.com/assets/images/colors/previews/prev_sorrento_coast.jpg" />
    </div>

<script>
    $('.popover1').on({
        mousemove: function(e) {
            $(this).next('img').css({
                top: e.pageY - 260,
                left: e.pageX + -120
            });
        },
        mouseenter: function() {
            var big = $('<img />', {'class': 'big_img1', src: this.src});
            $(this).after(big);
        },
        mouseleave: function() {
            $('.big_img1').remove();
        }
    });
</script>

I need to add text at the bottom of the popup. Is there a way to do this?

Thanks

Upvotes: 1

Views: 2188

Answers (1)

ltiong_dbl
ltiong_dbl

Reputation: 3216

Instead of creating an image by itself, you'll need to create a div to wrap your image and title. Try this:

<style type="text/css">
  .popover1 {top: 10px; left: 10px; position: relative;}
  #big { z-index: 999; position:absolute; text-align:center; padding:2px; background-color:#fff; border:1px solid #999; }
  #big img { height: 250px; }
</style>


<div id="hover-div">
    <img class="popover1" style="height: 100px;" src="http://transolid.com/assets/images/colors/previews/prev_sorrento_coast.jpg" title="some title text"/>
</div>


<script>
  $('.popover1').on({
      mousemove: function(e) {
          $(this).next('#big').css({
              top: e.pageY - 260 - 25, // height of image and title area plus some
              left: e.pageX + -120
          });
      },
      mouseenter: function() {
          var $big = $('<img />', {'class': 'big_img1', src: this.src}),
              $title = $('<div class="title"/>').html(this.title),
              $frame = $('<div id="big" />');

          $frame.append($big).append($title);

          $(this).after($frame);
      },
      mouseleave: function() {
          $('#big').remove();
      }
  });
</script>

Upvotes: 1

Related Questions