Jquery 如何对Raphael生成的SVG进行工具提示

我正在做一些教学练习，用XSLT、Javascript和Raphael将XML转换为SVG。我相信这是一条艰难的道路……但这是一种教育

我遇到的问题是创建工具提示。到目前为止，我找到了三种方法：

第一种方法是在对象上使用

.attr（{title:“blah”{）

。这是可行的，但Raphael并不正式支持它，我想在工具提示中添加的内容可能有点长，这是一个问题，当人们的操作系统在阅读完工具提示之前超时

我发现的第二种方法是函数。当鼠标悬停时，它可以让Raphael对象弹出，但是，就我所知，要弹出一个正常外观的工具提示是不可能的

使用。这似乎不起作用。我无法让Raphael将title属性添加到对象，并让它选择该标题。不确定为什么

---

所以，我想知道的是，向Raphael对象添加工具提示的一种简单可靠的方法是什么，当人们将鼠标移到对象上时，工具提示会弹出，当他们将鼠标移出对象时，工具提示会消失（但不是在之前）？

一种方法是在Raphael纸张上使用div标记。然后使用Jquery mousevents以及fadeIn（）和fadeOut（）.我在JSFIDLE上创建了一个示例。

如果您使用[title]属性，它将使用链接包装元素，从而使工具提示插件的使用变得容易，如

---

如果有人想找一个g Rapahel图表上的工具提示示例（我想它也可以很容易地与普通Rapahel一起使用），我做了一个使用动态创建的div（，所以不需要第三部分工具提示插件））作为饼图上的工具提示的例子

它使用拉斐尔的mousemove和mouseout

---

b、 t.w我使用图例作为工具提示的来源-当然，它不是必须的，并且可以被任何其他文本替换（只需将

this.label[1].attrs.text

替换为其他文本即可）

我使用qtip添加工具提示：

---

这看起来不错。奇怪的是，与大多数工具提示插件相比，这种方法有什么根本性的不同吗？我会尝试一下，然后回来。我遇到了clientX和clientY在所有浏览器中都不工作的问题。是的，我做了一些工作，但是我的SVG集中在一个div覆盖中，工具提示会弹出大约400px到装备中如果你使用offsetX和offsetY属性而不是clientX和clientY属性，它会解决你的问题。这在Safari和Chrome中都可以，但在Firefox中，工具提示会出现在包含div的左上角。是否有跨浏览器的解决方案？e.pageX和e.pageY是解决问题的方法。我认为Jquery会使这些是跨浏览器的。我正在尝试实现同样的目标-你找到了一个好的解决方案吗？没什么。我想我只是给出了一些标题属性…但不是正面的。丹尼尔：我们可以从raphael饼图对象中检索笔划、半径等属性吗…请看这个问题：我卡住了…提前感谢你的帮助lso有一个工具提示插件，它与你的方法完美配合。谢谢你的提示。我无法让它工作，你知道怎么做吗？它在页面底部显示工具提示文本，但没有js错误。@jpganz18这意味着你的工具提示代码工作正常，它只是在错误的位置显示。可能是因为你的CS中的样式错误或者你使用的工具提示插件无法识别坐标。另外，Raphael可能在我发布这篇文章的3年后改变了工作方式。你在使用IE10吗？我的示例在chrome和我的S4上都可以使用。我的jsfiddle是一个很老的示例。检查是否有可用的演示。

var R = Raphael('canvas', 100, 100);
R.path(path).attr({ title: 'Fancy tooltip' });

$('#canvas a').qtip();