javascript - 固定 Tipsy 工具提示在 Raphaël 路径节点上的位置

Question

这是一个非常具体且有点复杂的问题，所以我设置了一个 minimal test case在阅读其余部分之前，您可能应该先了解一下。

我有一个页面，通过 Raphaël 悬停时显示带有突出显示区域的图像.我也一直在努力添加 Tipsy tooltips到这些悬停，这样你就可以看到图像的每个部分被称为什么。

Raphaël 使用 SVG 绘制突出显示区域，并且由于 SVG 元素也是 DOM 节点，因此将 Tipsy 附加到它们很容易，如下所示:

// Get the path node as a jQuery object.
pathNode = $(path.node);

// Set the title so it's available to tipsy.
pathNode.attr('title', element.title);

// Add a Tipsy tooltip to each node, if Tipsy is loaded.
if ($.fn.tipsy) {
  pathNode.tipsy({
    fade: true
  });
}

这个问题只是美中不足，出现这个问题的原因是Tipsy在屏幕顶部(坐标0,0)而不是在SVG节点旁边绘制工具提示，我想不通出如何解决它。在调试 Tipsy JavaScript 时，它似乎在某个点有坐标，但仍然无法在正确的位置绘制。

谁能猜出来？ (有关详细信息，请参阅 minimal test case)。

Answer 1

也许尝试使用 gRaphaël获取这些提示。

请看我刚刚写的这个例子:http://jsfiddle.net/3tHmp/