首次悬停时未触发 JQuery ui 冲突答案

【问题标题】：JQuery ui collision not triggering at first hover首次悬停时未触发 JQuery ui 冲突
【发布时间】：2013-09-25 22:34:27
【问题描述】：

我有以下代码：

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

【问题讨论】：

你能发个 jsfiddle 吗？
apaul34208：我已经编辑了帖子，现在包含一个链接，显示有问题的网页。谢谢
在图像加载之前只设置最小宽度和最小高度怎么样？否则，您将需要按照 LeGEC 的建议在服务器端使用实际大小来填充数据属性。由于纵横比不匹配，它仍然会跳跃，但可能更容易接受，因为无论如何它可能会在后续图像上这样做。就个人而言，我现在会接受 LeGEC 的建议，除非您想更改插件以加载图像然后显示工具提示（它可能只是在初始状态下有一个错误）。
@TrueBlueAussie 感谢您的建议，我真的不明白为什么图像具有不同的大小和不同的悬停。你的 jsfiddle 真的帮助我理解了，此时我会再等一天左右，如果没有更好的解决方案，我会修改插件（修改插件是目前最好的解决方案）。

标签： jquery jquery-ui jquery-ui-tooltip

【解决方案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;
    }
    ...
}

【讨论】：

对您的想法做了一个快速模型（只是将尺寸固定为 100 x 100），它似乎确实解决了最初未知尺寸的问题：jsfiddle.net/fHt5J 没有故障。
@TrueBlueAussie 谢谢你的麻烦，我已经尝试过 jsfiddle.net/fHt5J 将图像的宽度增加到固定的 450px 但它会使图像脱离框架，它是因为框架有最大宽度？（没看到）还是因为框架也有问题及时获得宽度？
@LeGEC：还没有时间，但我今天会继续。谢谢

【解决方案2】：

您的问题与许多 js 脚本有关，这些脚本增加了您网站的权重，这就是为什么 ready 事件最近触发的原因，但您可以在 jquery.ui 脚本包含之后使用document.ready 中的tooltip 使用委托：

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

顺便说一句，为了改善用户体验（预览图像可能加载缓慢），您可以调整工具提示容器的设计：

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

使用image.onload 事件不是一个好主意，因为至少在 IE 中它可能不会为缓存的图像触发，并且异步工具提示对用户来说非常混乱并且有其自身的缺陷（看看这个问题cancel jquery tooltip during dynamic loading of content）

【讨论】：