如何对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:

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

1. 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.
2. 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.
3. 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屋！