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

How to do a tooltip on an SVG generated by Raphael

提问by mlissner

I'm doing a bit of a pedagogical exercise, converting XML to SVG with XSLT, Javascript and Raphael. I'm sure it's the hard way...but it's educational.

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

The problem I've run into is creating tooltips. So far, I've found three ways to do this:

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

1. The first way is to use .attr({title: "blah"{)on an object. This works, but it's not supported by Raphael officially, and the content I want to put in the tooltip might be somewhat long, which is a problem when people's OS times out the tooltip before people have finished reading it.
2. The second way I've found is the function here. It works OK for having a Raphael object popup when there is a mouseover, but, near as I can tell, getting a normal-looking tooltip to pop up isn't possible.
3. Using the jquery Tooltip plugin. This just doesn't seem to work. I can't get Raphael to add the title attribute to an object AND get this to select that title. Not sure why.

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

So, what I'd like to know is, what's an easy and reliable way to add tooltips to Raphael objects such that they popup when people mouseover the object, and disappear when they mouseout (but not before)?

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

回答by Zevan

One way to do this is to use a div tag on top of the Raphael paper. Then use Jquery mousevents along with fadeIn() and fadeOut(). I created an example on jsFiddle. Have a look

一种方法是在 Raphael 纸上使用 div 标签。然后使用 Jquery mousevents 以及fadeIn() 和fadeOut()。我在 jsFiddle 上创建了一个示例。看一看

回答by neojp

If you use [title] attributes, it will wrap the elements with links making it easy to use tooltip plugins like qtip.

如果您使用 [title] 属性，它将用链接包装元素，从而可以轻松使用qtip等工具提示插件。

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

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

回答by Daniel

In case someone will seek for an example of tooltip over g Rapahel charts (I guess it could be easily used with plain Rapahel too) I did one that use dynamically created div (so no third part tooltip plugin needed) that acts as a tooltop over pie chart

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

Interactive Pie Chart with Tooltip

带工具提示的交互式饼图

It uses mousemove and mouseout of raphael...

它使用 raphael 的 mousemove 和 mouseout ......

b.t.w I use the legend as a source of the tooltip - of course its not a must an could be replaced by any other text (just replace the this.label[1].attrs.textwith some other text)

顺便说一句，我使用图例作为工具提示的来源 - 当然它不是必须的，可以用任何其他文本替换（只需用其他文本替换this.label[1].attrs.text）

回答by chris loughnane

I used qtip to add tooltips:

我使用 qtip 添加工具提示：

http://jsfiddle.net/chrisloughnane/h5WU9/

http://jsfiddle.net/chrisloughnane/h5WU9/