修复Raphaël路径节点上Tipsy工具提示的位置

Question

这是一个非常具体且有些复杂的问题，因此我已经设置了一个最小测试用例，在阅读其余内容之前，您应该先查看它。

我有一个页面，通过Raphaël在悬停时显示带有高亮区域的图像。我还在努力添加Tipsy工具提示到这些悬停中，以便您可以看到每个图像部分的名称。

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）。

- mikl

---

这是特定于浏览器的吗？我刚在Chrome（Linux）中检查了您的示例，它可以正常工作。 - TigrisC

这些提示在我的 Mac 上的 Firefox 和 Safari 中都被放置在 (0,0) 位置，但是它似乎在 Chrome 中可以正常工作。 - mikl

Answer 1

也许可以尝试使用 gRaphaël 来制作这些提示。

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

- rsp

---

是的，我考虑过使用gRaphaël来完成这个任务，但如果可能的话，我更倾向于在HTML和SVG中使用相同的库来实现工具提示。 - mikl

Answer 2

你的演示在 iPhone 上也在 0,0 显示工具提示。 当方块变红时，您可以使用 getBBox() 来确定 min x 和 min y。 相应地放置提示？

- Chasbeen

---

提示并不在 Raphael 代码中，而是在 Tipsy 库中，因此在那里不能使用 getBBox()，因为它适用于所有种类的 DOM 节点。 - mikl