javascript - Coda 风格的工具提示，弹出定位

Question

我目前正在研究，试图复制 Coda 的工具提示: http://jqueryfordesigners.com/coda-popup-bubbles/

在这里查看我的示例:http://jsfiddle.net/timkl/Ccmh3/

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

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

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 属性将您的工具提示移动到 hoovered 元素上方，left 属性将它置于元素的中心。您还必须补偿边界/填充/等尺寸的一半(这就是 +5 所做的)。

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

是你想要的吗？