JQuery ui 碰撞在第一次悬停时未触发

Question

我有以下代码:

jQuery(function () {
    jQuery('.tooltip').tooltip({
        position: {
            my: "left top",
            at: "right top",
            collision: "flip fit"
        },
        content: function () {
            var element = jQuery(this);
            if (element.is("[rel]")) {
                var text = element.attr("rel");
                return '<div><img class="map" src="' + text + '"></div>';
            }
            if (element.is("[title]")) {
                return element.attr("title");
            }
            if (element.is("img")) {
                return element.attr("alt");
            }
        }
    });
});

这按预期工作，但仅在初始悬停之后(悬停在“rel”元素上)。
第一次将鼠标悬停时，会出现工具提示，但会与窗口碰撞(图像不会翻转或调整大小)。从第二次悬停开始，工具提示会根据需要翻转并调整大小。
我在第一次悬停之前和之后检查了“工具提示”元素，但没有发现任何差异。我还检查了每个元素的 CSS，但没有结果。
任何想法都会有所帮助，谢谢。

编辑:
此处的实时站点:http://castle.staging.wpengine.com/themes/
如果您检查网站，请确保图像与浏览器发生冲突(如果您的屏幕很大，可能需要调整浏览器的大小)

一些指出问题的图像:

第一次悬停:http://imagebin.org/272007

第二次悬停:http://imagebin.org/272008

还有另一个图像(底部适合不起作用:)

第一次悬停:http://imagebin.org/272009

第二次悬停:http://imagebin.org/272010

Answer 1

我怀疑工具提示的位置是在图像实际加载之前计算的，因此在知道实际图像的尺寸之前。

由于您事先知道图像的大小(图像的文件名表明如此)，因此您可以尝试将 img 大小硬设置为 css 属性，例如:

if ( element.is( "[rel]" ) ) {
  var text = element.attr( "rel" );

  var width = element.attr('data-imagewidth');   // this or extract width from img filename
  var height = element.attr('data-imageheight'); // this or extract width from img filename

  return '<div><img class="map" width="'+width'+" height="'+height+'" src="' + text + '"></div>';
}

tooltip doc还提到了回调机制。您可以尝试加载图像并仅在加载后显示工具提示:

content: function(callback) {
    ...
    if ( element.is( "[rel]" ) ) {
        var image = new Image();
        image.onload = function(){
            image.onload = null;
            callback(image);
        }
        image.src = element.attr('rel');
        return;
    }
    ...
}