Question

我正在乱砍，试图复制Coda的工具提示： http://jqueryfordesigners.com/coda-popup-bubbles/

我正在学习本教程，在这篇文章中，工具提示的位置是硬编码的。但是我希望位置根据工具提示的尺寸动态调整，以便它精确定位在触发图像上。

我对此有点挣扎，首先我想获得这样的工具提示的位置：

var width = $('.popup').width();
var height = $('.popup').height();

接下来，我尝试根据弹出窗口的尺寸操纵弹出窗口的位置。但是我的数学技能不足，我不知道如何做到这一点。这是我的微薄尝试：

    // reset position of popup box
    popup.css({
      top: -(.5*height),
      left: -(.5*width),
      display: 'block' // brings the popup back in to view
    })

有人知道如何解决这个问题吗？

JSFiddle：http://jsfiddle.net/timkl/Ccmh3/

Answer 1

你应该试试这个：

// reset position of popup box
    popup.css({
      top: -height,
      left: -(0.5*width)+5,
      display: 'block' // brings the popup back in to view
    })

top属性将你的tootltip移动到被覆盖的元素上方，left属性将其置于元素上方。您还必须补偿边框/填充/等等的一半大小（这就是+5的作用）。

这里有一个例子：http://jsfiddle.net/Ccmh3/23/（经过一些评论后，我也限制了内容宽度的大小，这样一来，效果更好）

这是你想要的吗？

Answer 2

你可以尝试这个，它需要一些调整，但可以找到不同的高度和宽度

 popup.css({
          top: -(0.8*height),
          left: -(0.5*width),
          display: 'block' // brings the popup back in to view
        });

在js fiddle

上试试

Coda式工具提示，弹出式定位

2 个答案: