如何在 Raphael 生成的 SVG 上制作工具提示 [英] How to do a tooltip on an SVG generated by Raphael
问题描述
我正在做一些教学练习，使用 XSLT、Javascript 和 Raphael 将 XML 转换为 SVG.我敢肯定这是一条艰难的道路......但它具有教育意义.
I'm doing a bit of a pedagogical exercise, converting XML to SVG with XSLT, Javascript and Raphael. I'm sure it's the hard way...but it's educational.
我遇到的问题是创建工具提示.到目前为止，我已经找到了三种方法来做到这一点:
The problem I've run into is creating tooltips. So far, I've found three ways to do this:
- 第一种方法是在对象上使用
.attr({title: "blah"{).这个是可以的，但是Raphael官方不支持，而且我想放入tooltip的内容可能会有点长，这就是操作系统在人们还没读完tooltip之前就超时的问题. - 我找到的第二种方法是这里的功能.在鼠标悬停时弹出 Raphael 对象可以正常工作，但是，据我所知，无法弹出看起来正常的工具提示.
- 使用 jquery 工具提示插件.这似乎行不通.我无法让 Raphael 将 title 属性添加到一个对象并让它选择该标题.不知道为什么.
- The first way is to use
.attr({title: "blah"{)on an object. This works, but it's not supported by Raphael officially, and the content I want to put in the tooltip might be somewhat long, which is a problem when people's OS times out the tooltip before people have finished reading it. - The second way I've found is the function here. It works OK for having a Raphael object popup when there is a mouseover, but, near as I can tell, getting a normal-looking tooltip to pop up isn't possible.
- Using the jquery Tooltip plugin. This just doesn't seem to work. I can't get Raphael to add the title attribute to an object AND get this to select that title. Not sure why.
那么，我想知道的是，有什么简单可靠的方法可以向 Raphael 对象添加工具提示，以便在人们将鼠标悬停在对象上时它们会弹出，并在鼠标移开时(但之前不会)消失?
So, what I'd like to know is, what's an easy and reliable way to add tooltips to Raphael objects such that they popup when people mouseover the object, and disappear when they mouseout (but not before)?
推荐答案
一种方法是在 Raphael 纸上使用 div 标签.然后使用 Jquery mousevents 以及fadeIn() 和fadeOut().我在 jsFiddle 上创建了一个示例.看看
One way to do this is to use a div tag on top of the Raphael paper. Then use Jquery mousevents along with fadeIn() and fadeOut(). I created an example on jsFiddle. Have a look
这篇关于如何在 Raphael 生成的 SVG 上制作工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
