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

2021/01/19 21:51 · jquery ·  · 0评论

我正在做一些教学工作,使用XSLT,Javascript和Raphael将XML转换为SVG。我敢肯定这是艰难的方式……但这是有教育意义的。

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

  1. 第一种方法是.attr({title: "blah"{)在对象上使用。该方法有效,但是Raphael官方不支持它,并且我要在工具提示中添加的内容可能会有些长,这在人们的操作系统在人们未完全阅读工具提示之前将其超时时会出现问题。
  2. 我发现的第二种方法是这里的功能当鼠标悬停在上面时,可以使Raphael对象弹出来,但是可以,但是,据我所知,不可能弹出看起来正常的工具提示。
  3. 使用jquery工具提示插件这似乎不起作用。我无法让Raphael将title属性添加到对象并获取它来选择该标题。不知道为什么。

因此,我想知道的是一种简单可靠的方法来向Raphael对象添加工具提示,以使它们在人们将鼠标悬停在对象上时弹出,而在鼠标移出时消失(但不是在以前)吗?

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

如果使用[title]属性,它将使用链接包装元素,从而使使用qtip之类的工具提示插件变得容易

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

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

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

带有工具提示的交互式饼图

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

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

我用qtip添加了工具提示:

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

本文地址:http://jquery.askforanswer.com/ruheduiraphaelshengchengdesvgjinxinggongjutishi.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!