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

工具提示文档还提到了一个回调机制。您可以尝试加载图像并仅在加载后显示工具提示：

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

Answer 2

您的问题与许多js脚本有关，这些脚本为您的站点增加了一个权重，这也是为什么ready最近触发的原因，但是在包含了tooltip脚本之后，您使用了document.ready中的can out委托：

jQuery(document).tooltip({
    items: '.tooltip',
    position: function() {
        ...
    },
    content: function () {  
        ...
    }
})

顺便说一句，为了提高用户的效率(预览图像可能加载缓慢)，您可以调整工具提示容器的设计：

• 设置最小宽度/最小高度
• 将加载图像设置为背景

使用image.onload事件不是个好主意，因为它可能不会触发缓存的映像，至少在IE中是这样，异步工具提示对用户来说是相当混乱的，并且有它自己的缺陷(看看这个问题，在动态加载内容期间取消jquery工具提示)