Question

I have a tool tip who’s data is being fetched via ajax. My issue is that I want to adjust the height of the box to fit the data (just some markup).

The box is absolutely positioned and I want the top positioning to change based on the size of the box such that it’s bottom border is always touching an element position below.

In chrome, this is working fine. But in FireFox, I can’t seem to get it to work. I’ve tried to get the initial top css value by calling .position().top and also by retrieving the css value .css(‘top’). Neither works in FF. I’m not sure what to do.

var popup=$('#saved_descr_wrap');
var cur_height=popup.height();
var cur_top=popup.css('top');
cur_top=parseInt(cur_top);



var entryHover = function(event){
    var favorite_id=2;
    popup.show();

//  var fave_id=$(event.target).closest('tr').attr('data-postid');

    $.get('{{Site}}/favorites/view/', {id:favorite_id}, function(data){
        popup.find('img').hide();
        $('#saved_note').text(data);
        var new_height=popup.height();

        var c=cur_top + cur_height - new_height;


        popup.css('top', c);
    });

};

var exitHover=function(event){ 
//  popup.hide();
    popup.css('top',cur_top);
    $('#saved_note').text('');
    popup.find('img').show();
};

$('tbody tr').hoverIntent({over:entryHover,out:exitHover});

Here’s my shot at jQuery UI (also a fail):

     var entryHover = function(event){
    popup.position({my:"right bottom",at:"top right", of:"#main_box"});
    popup.show();

    var fave_id=$(event.target).closest('tr').attr('data-postid');

    $.get('{{Site}}/favorites/view/', {id:fave_id}, function(data){
        popup.find('img').hide();
        $('#saved_note').text(data);

    });

};

var exitHover=function(event){ 
    popup.hide();
    popup.position({my:"right bottom",at:"top right", of:"#main_box"});

    $('#saved_note').text('');
    popup.find('img').show();
};

$('tbody tr').hoverIntent({over:entryHover,out:exitHover});

Answer 1

Are you able to use jQuery UI functionality? If you can, have you looked into the position function?

Example

        $( ".positionable" ).position({
            of: $( "#parent" ),
            my: "top left",
            at: "top left",
        });