jQuery popup

http://stackoverflow.com/questions/15559388/

by Ali Khaled

HTML

<div class="person-container">
  <a href="#" class="trigger">Hello</a>
  <div class="pop-up4">
      <h3>John Doe</h3>
      <p>Hi! My name is John Doe</p>
  </div>
</div>
<div class="person-container">
  <a href="#" class="trigger"><img src="http://placehold.it/75x75" /></a>
  <div class="pop-up4">
      <h3>Jane Doe</h3>
      <p>Hi! My name is Jane Doe</p>
  </div>
</div>

CSS

div.pop-up4 {
  display: none;
  position: absolute;
  width: 280px;
  padding: 10px;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
}

JavaScript

$(function() {
    var moveLeft = 20;
    var moveDown = 10;

    $('a.trigger').hover(function(e) {
      $(this).next('.pop-up4').show();
        //.css('top', e.pageY + moveDown)
        //.css('left', e.pageX + moveLeft)
        //.appendTo('body');
    }, function() {
      $(this).next('.pop-up4').hide();
    });

    $('a.trigger').mousemove(function(e) {
      $(this).next('.pop-up')
        .css('top', e.pageY + moveDown)
        .css('left', e.pageX + moveLeft);
    });
});