2

我有以下代码：

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

    • 4

    2 回答 2

    0

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

    由于您事先知道图像的大小（您的图像文件名建议如此），您可以尝试将 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;
    }
    ...
}
    于 2013-10-01T12:32:03.180 回答
    0

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

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

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

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

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

    于 2013-10-07T17:59:18.050 回答