Question

我正在做一些教学练习，用XSLT，Javascript和Raphael将XML转换为SVG。我确信这很难......但它很有教育意义。

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

第一种方法是在对象上使用.attr({title: "blah"{)。这是有效的，但拉斐尔并没有正式支持，我想在工具提示中加入的内容可能有点长，这是人们操作系统在人们读完之前超出工具提示的问题。
我找到的第二种方法是函数here。当有鼠标悬停时，它可以正常弹出Raphael对象，但是，据我所知，不可能弹出一个看起来很正常的工具提示。
使用jquery Tooltip plugin。这似乎不起作用。我无法让Raphael将title属性添加到对象中并获取此选项以选择该标题。不确定原因。

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

Answer 1

这样做的一种方法是在Raphael纸上使用div标签。然后使用Jquery mousevents以及fadeIn（）和fadeOut（）。我在jsFiddle上创建了一个例子。 Have a look

Answer 2

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

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

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

Answer 3

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

Interactive Pie Chart with Tooltip

它使用ramel的mousemove和mouseout ...

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

Answer 4

我使用qtip添加工具提示：