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

这是一个非常具体且有点复杂的问题,所以我在阅读其余部分之前设置了一个你应该看到的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).

解决方法:

也许尝试使用gRaphaël这些提示.

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

上一篇:c# – 用于下拉列表项的工具提示


下一篇:javascript – 建议在图像上创建工具提示