West55
West55

Reputation: 496

jquery mouse offset position different in firefox and chrome

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();
});

Upvotes: 1

Views: 1057

Answers (2)

West55
West55

Reputation: 496

    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.

Upvotes: 0

The Maniac
The Maniac

Reputation: 2626

Using the .live function is not recommended due to various reasons. Try using a more typical approach:

$(document).ready(function() {
    $("img.more_info, div.option_item_wrap label").mouseover(function() {
        // Your code
    });
});

This may or may not solve your problem but if it does, then you were experiencing the same issue as this question.

Upvotes: 1

Related Questions