ajax 请求后的 jQuery 工具提示位置

Question

这个问题涉及很多内容，所以我会尽量保持简单。基本上我在表格中的一列 td 上有一个 jQuery 工具提示。我做了一个ajax请求来提取一些数据并显示它...我在等待回调完成时显示一个加载gif。一旦完成，内容将被返回的内容替换...我将在一秒钟内显示一些代码以帮助澄清。我使用 javascript 返回 HTML 表。该表可以有 1、2 或 3 行，具体取决于 ajax 请求返回的内容。 所有这些都很好。

我遇到的问题是，一旦将 gif 替换为表格，其尺寸就会变大，从而导致间距问题。我录制了一段视频，供您看看会发生什么...当我第二次将鼠标悬停在 td 上时，工具提示正确显示(在 td 上方)而不是覆盖它。它这样做是因为它离开了顶部位置(内置 jQuery 方法来设置偏移量)。 THIS VIDEO

对此的任何帮助将不胜感激!

<小时/>

JAVASCRIPT 部分中的 HTML

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 工具提示部分

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

如您所见，我调用该函数来设置数据并传递返回的内容...我只是不太熟悉工具提示以及如何检查返回的内容..

附加说明:

我是否应该像这样在 javascript 中返回 html(我通常不喜欢这样做，但没有看到其他选项)？

有没有办法让它锚定在工具提示的底部而不是顶部？

编辑: 这是一个复制类似情况的jsfiddle。问题是当数据更新时，它不会重新定位自己 - 而是离开位置的顶部。所以我需要记忆一下位置函数或类似的东西。 http://jsfiddle.net/gF3sG/2/

已解决供其他人使用----最终解决方案:

$('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

我能够通过首先关闭工具提示、重新添加定位和内容、然后重新打开它来完成所描述的内容。这看起来相当多余，但它确实有效。

$("#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/