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