3

当用户将鼠标悬停在缩略图上时，我试图显示一个包含完整版本图像的工具提示。我希望工具提示显示在缩略图的上方和左侧。图像可以由用户动态设置，所以我不知道它的大小。这是一个演示它的小提琴：

http://jsfiddle.net/philipp_ko/8HvgM/2/

$(function () {
    $(document).tooltip({
        show: false,
        hide: false,
        position: {
            my: "right bottom",
            at: "left top"

        },
        content: function () {
            var contentStr = "<img src='" + this.src + "'>";
            return contentStr;
        }
    });
});

如您所见，有两张相似的图片，一张位于 wikimedia，另一张位于 Dropbox。对于 wikimedia 图像，工具提示正确显示在缩略图上，而对于 Dropbox 图像则没有。对于它们中的任何一个，工具提示都没有正确水平显示。如果我随后指定图像的高度和宽度，则工具提示将在垂直方向正确显示，而不是在水平方向完全正确显示（请参见下面的项目符号点 2）。

如我所见，这里有两个问题：

  • 首先，一些服务器在发送响应时提供图像尺寸，而另一些则不提供。然后 JQuery 使用此尺寸来计算工具提示位置。有谁知道是否是这种情况，如果是，服务器端应该做什么？或者，如果有办法让 JQuery 使用实际图像大小。
  • 其次，即使设置了大小，看起来tooltip容器的宽度也被限制为400px，所以如果图像较大，它只是显示在容器之外。但是，JQuery 使用此宽度来计算工具提示在父级左侧时的位置。有谁知道为什么会有这样的限制以及如何解决？

谢谢！

4

0 回答 0