Question

Hello I have a tool tip I am making with jquery, that loads the alt value from an image into a floating div thats being positioned by jquery offset(). My code works in Chrome/Safari but not Firefox.

In Chrome the tooltip appears above an icon which sits right of the label for this item. (This is also done in a modal box, maybe this is the problem?

I am still somewhat new to this so please excuse my code.

$("img.more_info, div.option_item_wrap label").live('mouseover', function(e) {
    optionIcon = $(this).closest('div').find('img.more_info');
    optionInfoContent = optionIcon.attr('alt');

    if(optionInfoContent != undefined) {
        findImage = $(this).closest('div').find('span.option_item_image');
        $("body").append('<div id="option_info"><p>' + optionInfoContent + '</p><div id="option_info_tail"></div></div>');
        findImage.clone().prependTo('div#option_info p');
        toolTipHeight = $('div#option_info').height();
        findIconPost = optionIcon.offset();
        topPos = findIconPost.top - (toolTipHeight + 20);
        leftPos = findIconPost.left - 80;

        $('div#option_info').css('top', topPos).css('left', leftPos).fadeIn();
    };
}).live('mouseout', function() {
    $('div#option_info').remove();
});

Answer 1

    if($.browser.mozilla){
        topPos = findIconPost.top - (toolTipHeight + 90);
    }

This was the only solution I could come up with, I just adjusted the offset for firefox.