jquery - 如何在 Raphael 生成的 SVG 上制作工具提示

Question

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

我遇到的问题是创建工具提示。到目前为止，我已经找到了三种方法来做到这一点:

1. 第一种方法是在对象上使用 .attr({title: "blah"{)。这可行，但 Raphael 官方不支持它，而且我想放入工具提示中的内容可能有点长，当人们的操作系统在人们读完之前就超时了工具提示时，就会出现问题。
2. 我发现的第二种方法是函数 here 。当鼠标悬停时，它可以弹出 Raphael 对象，但是，据我所知，弹出一个看起来正常的工具提示是不可能的。
3. 使用jquery Tooltip plugin 。这似乎不起作用。我无法让 Raphael 将标题属性添加到对象并让它选择该标题。不知道为什么。

所以，我想知道的是，向 Raphael 对象添加工具提示的简单可靠的方法是什么，以便当人们将鼠标悬停在对象上时弹出工具提示，并在鼠标移开时消失(但不是之前)？

Answer 1

实现此目的的一种方法是在 Raphael 纸张顶部使用 div 标签。然后使用 Jquery mouseevents 以及 fadeIn() 和 fadeOut()。我在 jsFiddle 上创建了一个示例。 Have a look