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

【问题标题】：Fixing position of Tipsy tooltips on Raphaël path nodes在 Raphaël 路径节点上修复 Tipsy 工具提示的位置
【发布时间】：2011-02-20 12:51:27
【问题描述】：

这是一个非常具体且有些复杂的问题，因此我设置了一个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）。

【问题讨论】：

这个浏览器是特定的吗？我刚刚在 chrome (linux) 中检查了你的示例，它工作正常。
提示在我的 Mac 上的 Firefox 和 Safari 中都放置在 (0,0) 中，但是是的，它似乎在 Chrome 中运行良好。

标签： javascript svg tooltip raphael tipsy

【解决方案1】：

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

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

【讨论】：

是的，我考虑过使用 gRaphaël，但如果可能的话，我更愿意在 HTML 和 SVG 中使用相同的工具提示库。

【解决方案2】：

您的演示还在 iPhone 上的 0,0 处显示工具提示。随着碎片变红，您可以使用 getBBox() 识别 min x 和 min y 相应地放置小费？

【讨论】：

提示没有放在 Raphaël 代码中，而是放在 Tipsy 库中，因此 getBBox() 不是一个选项，因为它适用于各种 DOM 节点。