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/

Answer 2

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

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

2 个答案: