jQuery tooltip position after an ajax request

Question

There's quite a bit that goes into this question so I'll try and keep it as simple as I can. basically I have a jQuery tooltip on a column of td's in a table. I do an ajax request to pull some data out and display it... I display a loading gif while im waiting for the callback to complete. once that finishes the contents are replaced with what is returned... i'll show some code in a sec to help clarify. I use javascript to return a HTML table back. the table can have either 1, 2 or 3 rows depending on what is returned back from the ajax request. all of this works just fine.

the issue i have is once the gif is replaced with the table, its size is bigger which causes a problem with the spacing. I recorded a video of it for you to see what happens... when i hover over the td a second time the tooltip displays correctly (above the td) instead of covering it. its doing this because its going off of a top position (built in jQuery method to set an offset). THIS VIDEO

any help on this would be really appreciated!

---

HTML IN JAVASCRIPT PORTION

var setWhateverData = function(sent){
    if(sent){
        var $finishThisShitStr ="";
            if(thingy['type'] =="whatever"){
                var $whateverStr = '<table>' +
                    '<tr>' +
                        '<td><div><img src="my-logo.png"></div></td>' +
                        '<td>' + thingy.whatever + '</td>' +
                    '</tr>' +
                '</table> ';
            }
            else if (thingy['type'] == "maybe") {
                var $maybeStr = '<table>' +
                    '<tr>' +
                        '<td><div><img src="my-logo.png"></div></td>' +
                        '<td>' + thingy.maybe + '</td>' +
                    '</tr>' +
                '</table> ';

            }
            else if (thingy['type'] == "haha"){
                var $hahaStr = '<table>' +
                    '<tr>' +
                        '<td><div><img src="my-logo.png"></div></td>' +
                        '<td>' + thingy.haha + '</td>' +
                    '</tr>' +
                '</table> ';
            }
            else{
                $finishThisShitStr = '<span>YOU DUN GOOFED</span>'
            }
        };
        if($whateverStr){   // add strings of html to final string to return
            $finishThisShitStr = $finishThisShitStr + $whateverStr;
        }
        if($maybeStr){
            $finishThisShitStr = $finishThisShitStr + $maybeStr;
        }
        if($hahaStr){
            $finishThisShitStr = $finishThisShitStr + $hahaStr;
        }
        return $finishThisShitStr;
    }
}

---

JQUERY TOOLTIP PORTION

$('td').tooltip({ 
    items: "[data-whatever]",
    content: function(){
        var el = $(this),
            content = el.data('ajax-stuff');
        if(content)
            return content;    
        return '<img src=mySpinnerGif.gif>';
    },
    open: function(){
        var elem = $(this),
            info = elem.data('ajax-stuff');
        if (info) {
          elem.tooltip('option', 'content', info);
        } else {
          var id = elem.data('whatever');
            $.ajax('/echo/html/' + id).always(function(result)  {
                var $data = setWhateverData(result)
                elem.tooltip('option', 'content', $data);
                elem.data('ajax-stuff', $data);
            });
        }
    }
});

as you can see i call the function to set the data and pass it whats returned... I am just not really familiar with the tooltip and how to check for whats returned..

ADDITIONAL NOTES:

should I even return html in javascript like this ( i usually don't like to, but didn't see another option)?

is there a way to tell it to anchor off of the bottom of the tooltip and not the top?

EDIT: this is a jsfiddle duplicating a similar case.. the problem is when the data is updated it doesn't reposition itself - rather goes off of the top of the location. so I need to like recall the position function or something like that. http://jsfiddle.net/gF3sG/2/

SOLVED FOR OTHERS TO USE ---- FINAL SOLUTION:

$('td').tooltip({ 
    items: "[data-whatever]",
    content: function(){
        var el = $(this),
            content = el.data('ajax-stuff');
        if(content)
            return content;    
        return '<img src=mySpinnerGif.gif>';
    },
    open: function(){
        var elem = $(this),
            info = elem.data('ajax-stuff');
        if (info) {
          elem.tooltip('option', 'content', info);
        } else {
          var id = elem.data('whatever');
            $.ajax('/echo/html/' + id).always(function(result)  {
                var $data = setWhateverData(result)
                elem.data('ajax-stuff', $data);
                elem.tooltip("close");
                elem.tooltip("open");
            });
        }
    }
});

Answer 1

I was able to accomplish what was described by first closing the tooltip, re-adding the positioning and content, the opening it back up. It seems rather redundant, but it works.

$("#trigger").tooltip({
position: {
    my: "center bottom-20", // the "anchor point" in the tooltip element
    at: "center top" // the position of that anchor point relative to selected element
},
items: '#trigger',
content: function(response) {

    setTimeout( function() {

      doIt();

    }, 1500);
    return 'Testing.<br>testing<br>testing<br>testing<br>testing<br>';
}
});

function doIt(){

$("#trigger").tooltip("close");

 var html = '';
for ( var i = 0; i < 10; i++ ){
     html += 'Hello ' + i + '<br />';
}

$("#trigger").tooltip({
position: {
    my: "center bottom-20", // the "anchor point" in the tooltip element
    at: "center top" // the position of that anchor point relative to selected element
},
items: '#trigger',
content: html
});

$("#trigger").tooltip("open");
}

http://jsfiddle.net/fenderistic/W6x83/

Answer 2

In your ajax method or setTimeout you can get a reference to the tooltip using the widget function. Once you have the reference to the "loading" tooltip you can close it before you set the ajax data. Once the new data is set the tooltip is reopened using the new height.

$('#trigger').tooltip();
//Get refrence to the tooltip widget
var w = $('#trigger').tooltip('widget');
w.tooltip('close');

Forked fiddle: http://jsfiddle.net/smurphy/wqH22/2/