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

Question

我正在做一些教学练习,用XSLT,Javascript和Raphael将XML转换为SVG.我确信这是艰难的方式......但它具有教育意义.

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

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

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

Answer 1

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

Answer 2

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

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

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