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