Question

I have the following code;

var posLeft = 170;
var posDown = e.pageY;

    $(this).next().css({'top':posDown, 'left':posLeft, 'position':'absolute'}).toggleClass('is-hidden');
});

and HTML

<tr>
    <td><a href="#">123</a>
        <div class="pop-up is-hidden">
            <p>Type:<span>Code</span></p>
            <p>Number:<span>123</span></p>
            <p>Status:<span>Valid</span></p>
            <p>Sold In:<span>August</span></p>
            <p>Uploaded:<span>20/09/2012 10:34</span></p>
        </div>
    </td>
    <td>Code</td>
    <td>Valid</td>
    <td>Device is active</td>
</tr>

The jQuery shows the .pop-up div on hover, the problem I have is with the vertical positioning of .pop-up. It sit’s the left correctly, but the vertical positioning is out. I think using pageY is positioning the div relatively to the document, when I would like it to be positioned against the anchor.

The table does not have any positioning applied, so I need help with the best method of getting the .pop-up to appear in the right location.

Thanks in advance.

Answer 1

Do you mean like this FIDDLE?

$("a.tooltip").mouseenter(function(e) {
    tooltip = $(this).parent().find(".is-hidden");
    tooltip
        .css("top",(e.pageY) + "px")
        .css("z-index","200002")
        .css("left",(e.pageX) + "px");

    tooltip.show();
}).mouseleave(function(e) {
    tooltip = $(this).parent().find(".is-hidden");
    tooltip.hide();
});​