jquery - 如何在 Raphael 生成的 SVG 上做一个工具提示

Question

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

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

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

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

score 12 · Accepted Answer

一种方法是在 Raphael 论文的顶部使用 div 标签。然后将 Jquery mousevents 与fadeIn() 和fadeOut() 一起使用。我在 jsFiddle 上创建了一个示例。看一看

score 7 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

它使用拉斐尔的mousemove和mouseout ...

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

score 1 · Accepted Answer

1

我使用 qtip 添加工具提示：

于 2012-06-12T11:04:47.863 回答

4 回答 4