Question

I have this javascript that pulls some data via an ajax request the method returns a portion of html,

  $('.tooltip_target').click(function(e){
    $('.tooltip').remove();
    var self = $(this);
    $.ajax({
     type: "POST",
     url: self.attr('href'),
     data: "",
      success: function(html){
       var popup = html
       self.parent().parent().parent().append(html).css({
         position: "absolute",
         top: e.pageY,
         left: e.pageX
       });
      }
    });
    e.preventDefault();
  });

What I am wanting to do it position the popup absolutly where the user has clicked, however I am struggling to get it right, could some please guide me, below is the HTML that I am trying to attach the popup too.

<div id="wrapper">
    <li>
        <a href="/jobwall/viewjob/<?php echo $job['employer_id'];?>" class="tooltip_target">
            <img src="<?php echo base_url();?>media/images/employers/<?php echo $job['logo_filename'];?>" />
        </a>
    </li>
</div>

This user clicks the link, and the pop should appear, where the user clicked the link, it should theoretically be over the top of the links so it does not disturb the page layout.

Answer 1

Try this:

$('.tooltip_target').click(function(e){
  $('.tooltip').remove();
  $.ajax({
    type: "POST",
    url: $(this).attr('href'),
    data: "",
    success: function(html){
      $(html).css({
        position: "absolute",
        top: e.pageY,
        left: e.pageX
      }).appendTo('#wrapper');
    }
  });
  e.preventDefault();
});

The issue was that you were applying your css to the wrapper, and not to the new element you were injecting. The ‘append’ method returns the element you appended to, not the element you appended. E.g. this.append(that) returns this, not that.