如何在 Raphael 生成的 SVG 上做一个工具提示答案

【问题标题】：How to do a tooltip on an SVG generated by Raphael如何在 Raphael 生成的 SVG 上做一个工具提示
【发布时间】：2011-03-25 22:52:31
【问题描述】：

我正在做一些教学练习，使用 XSLT、Javascript 和 Raphael 将 XML 转换为 SVG。我敢肯定这是一条艰难的道路……但它具有教育意义。

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

第一种方法是在对象上使用.attr({title: "blah"{)。这可行，但 Raphael 官方不支持，而且我想放入 tooltip 的内容可能有点长，当人们的操作系统在人们阅读完之前将 tooltip 超时时，这是一个问题。
我发现的第二种方法是函数here。当鼠标悬停时弹出 Raphael 对象可以正常工作，但据我所知，弹出一个看起来正常的工具提示是不可能的。
使用jquery Tooltip plugin。这似乎不起作用。我无法让 Raphael 将 title 属性添加到对象并让它选择该标题。不知道为什么。

那么，我想知道的是，向 Raphael 对象添加工具提示以使它们在人们将鼠标悬停在对象上时弹出并在鼠标移出时消失（但不是之前）消失的简单可靠的方法是什么？

【问题讨论】：

【解决方案1】：

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

【讨论】：

这看起来不错。好奇，与大多数工具提示插件相比，这种方法有什么根本不同吗？我会试一试然后回来。我遇到了 clientX 和 clientY 不能在所有浏览器中工作的问题。
是的，我得到了一些工作，但我的 SVG 位于 div 叠加层的中心，并且工具提示会在它应该的右侧弹出大约 400 像素。
如果您使用 offsetX 和 offsetY 属性而不是 clientX 和 clientY 属性，它将解决您的问题。
这适用于 Safari 和 Chrome，但在 Firefox 中，工具提示出现在包含 div 的左上角。有没有跨浏览器的解决方案？
e.pageX 和 e.pageY 是要走的路。我认为 Jquery 使这些跨浏览器。

【解决方案2】：

如果您使用 [title] 属性，它将使用链接包装元素，从而可以轻松使用工具提示插件，例如 qtip。

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

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

【讨论】：

Bootstrap3 也有一个工具提示插件，它与您的方法完美配合。谢谢你的提示。
我无法让它工作，知道怎么做吗？它在页面底部显示工具提示文本，但没有 js 错误..
@jpganz18 这意味着您的工具提示代码可以正常工作，只是将其显示在错误的位置。可能是因为您的 CSS 中的样式错误或您使用的工具提示插件无法识别坐标。此外，在我发布这篇文章 3 年后，Raphael 可能已经改变了事情的运作方式。

【解决方案3】：

如果有人会在 g Rapahel 图表上寻找工具提示的例子（我想它也可以很容易地与普通 Rapahel 一起使用）我做了一个使用动态创建的 div 的例子（所以不需要第三方工具提示插件) 用作饼图上方的工具

它使用 raphael 的 mousemove 和 mouseout...

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

【讨论】：

Daniel：我们可以从拉斐尔饼图对象中检索笔画、半径等属性吗...请看这个问题：stackoverflow.com/questions/15846655/… 我卡住了...提前感谢您的帮助

【解决方案4】：

我使用qtip添加工具提示：

【讨论】：

你用的是IE10吗？我的示例适用于 chrome 和我的 S4。我的 jsfiddle 是一个很老的例子。检查 qtip2.com/demos 以获得有效的演示。