在Raphaël路径节点上修复Tipsy工具提示的位置 [英] Fixing position of Tipsy tooltips on Raphaël path nodes

问题描述

这是一个非常具体且有点复杂的问题，因此我设置了最小测试用例你应该在阅读剩下的内容之前看到它。

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.

我有一个页面显示带有突出显示区域的图像，通过Raphaël。我一直在努力为这些悬停添加 Tipsy工具提示，这样你就可以看到每个部分的内容调用图像。

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使用SVG绘制突出显示的区域，由于SVG元素也是DOM节点，因此可以轻松地将Tipsy附加到它们：

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
  });
}

这个问题只是美中不足，问题的原因是Tipsy在屏幕顶部（坐标0,0）处绘制工具提示，而不是在SVG节点旁边，我无法弄清楚如何修复它。在调试Tipsy JavaScript时，似乎在某些时候有坐标，但仍然无法在正确的位置绘制。

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).

推荐答案

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

Maybe try using gRaphaël for those tips.

看到这个例子我刚刚写道： http：// jsfiddle .net / 3tHmp /

See this example I just wrote: http://jsfiddle.net/3tHmp/

这篇关于在Raphaël路径节点上修复Tipsy工具提示的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！