修复 Raphael 路径节点上 Tipsy 工具提示的位置
这是一个非常具体且有些复杂的问题，因此我设置了一个最小测试用例 在阅读本文的其余部分之前，您可能应该看到这一点。
我有一个页面，通过 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 时，它似乎在某个点有坐标，但仍然无法在正确的位置绘制。
有人能弄清楚吗？ （有关详细信息，请参阅最小测试用例）。
This is a very specific and somewhat complex issue, so I have set up a minimal test case that you should probably see before reading the rest of this.
I have page that displays images with highlighted areas on hover via Raphaël. I have also been working on adding Tipsy tooltips to these hover, so you can see what each part of the image is called.
Raphaël draws the highlighted areas with SVG, and since SVG elements are also DOM-nodes, attaching Tipsy to them is easily accomplished like this:
// 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
});
}
The problem only fly in the ointment, and the reason for this question is that Tipsy draws the tooltip at the top of the screen (at coordinates 0,0) instead of next to the SVG node, and I can't figure out how to fix it. When debugging the Tipsy JavaScript it seems to have the coordinates at some point, but still fails to draw in the right spot.
Can anyone figure it out? (See the minimal test case for details).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
也许可以尝试使用 gRaphaël 来获取这些提示。
请参阅我刚刚写的这个示例： http://jsfiddle.net/3tHmp/
Maybe try using gRaphaël for those tips.
See this example I just wrote: http://jsfiddle.net/3tHmp/
您的演示还在 iPhone 上的 0,0 处显示工具提示。
当碎片变红时，您可以使用 getBBox() 识别最小 x 和最小 y
相应地放置小费？
Your demo is also showing tooltips at 0,0 on the iPhone.
As the pieces go red you can identify min x and min y by using getBBox()
Place tip accordingly?