代码之家 › 专栏 › 技术社区 › mlissner

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

raphael tooltip svg jquery

25

mlissner · 技术社区 · 16 年前

我在做一些教学练习,用XSLT、Javascript和Raphael将XML转换成SVG。我确定这是很难的…但这是教育性的。

第一种方法是使用 .attr({title: "blah"{) 在一个物体上。这是可行的,但是它没有得到Raphael的正式支持,而且我想放在工具提示中的内容可能有点长,这是一个问题,当人们的操作系统在人们阅读完工具提示之前就超时了。
我发现的第二个方法是函数 here
使用 jquery Tooltip plugin . 这好像不管用。我不能让拉斐尔给一个对象添加title属性,然后让它来选择那个标题。不知道为什么。

所以,我想知道的是,有什么简单可靠的方法可以为Raphael对象添加工具提示,这样当人们鼠标移到对象上时,它们会弹出,当鼠标离开时会消失(但不是之前)?

4 回复 | 直到 16 年前

1

12

Zevan 15 年前

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

2

7

neojp 14 年前

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

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

3

2

Community Mohan Dere 6 年前

如果有人会在g Rapahel图表上寻找工具提示的例子(我想它也可以很容易地与普通的Rapahel一起使用),我做了一个使用动态创建的div的例子( )作为饼图的工具提示

它用的是拉斐尔的mousemove和mouseout。。。

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

4

1

chris loughnane 14 年前

我使用qtip添加工具提示: