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

Question

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

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

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

---

Java 脚本部分的 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/

Answer 2

在您的 ajax 方法或 setTimeout 中，您可以使用 widget 函数获取对工具提示的引用。一旦你有了对“加载”工具提示的引用，你就可以在设置 ajax 数据之前关闭它。设置新数据后，工具提示将使用新高度重新打开。

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

分叉小提琴：http://jsfiddle.net/smurphy/wqH22/2/