Question

I’m trying to build a popover control for a website I’m working on, but I can’t get the positioning right. I’ve tried various ways of getting the hyperlink’s center, but it’s always a little off.

I don’t want to hardcode the coordinates because I need this to be universal, it needs to work with any link that I may use the popover on in the future.

What am I doing wrong here?

Here’s my current method:

$('#whatsthis').click(function(e) 
{
    var _linkLocation = $(this).offset();
    $('#helpTip').css('position','absolute');

    $('#helpTip').css('left', _linkLocation.left - $(this).width()/2);

    $('#helpTip').fadeIn();
    return false;
}); 

..and here’s the current output:

Answer 1

Try the below:

$('#whatsthis').click(function(e)  {
    var _linkLocation = $(this).offset(), $helpTip = $('#helpTip');
    $helpTip.offset({ 
        'left': _linkLocation.left + $(this).width()/2 - $helpTip.width()/2,
        'top': _linkLocation.top + $(this).height()
    }).fadeIn();
    return false;
});