Question

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

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

对此的任何帮助都会非常感激！

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

你可以看到我调用函数设置数据并传递它返回什么...我只是不是很熟悉工具提示以及如何检查返回的内容..

其他说明：

我是否应该像这样在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函数获取对工具提示的引用。一旦你引用了＃34; loading＆＃34;工具提示您可以在设置ajax数据之前将其关闭。设置新数据后，将使用新高度重新打开工具提示。

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

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

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

2 个答案: