如何向svg图形添加工具提示？ [英] How to add a tooltip to an svg graphic?

问题描述

我有一系列的svg矩形（使用D3.js），我想在鼠标悬停时显示一条消息，消息应该由一个作为背景的框包围。它们应该完全对齐到矩形（在顶部和中心）。

I have a series of svg rectangles (using D3.js) and I want to display a message on mouseover, the message should be surrounded by a box that acts as background. They should both be perfectly aligned to each other and to the rectangle (on top and centered). What is the best way to do this?

我尝试使用x，y，width和height属性添加svg文本，然后添加一个svg rect。问题是文本的参考点在中间（因为我想它居中对齐我使用 text-anchor：middle ），但对于矩形，它的顶部左边的坐标，加上我想要一些边缘的文字，这使它有点痛苦。

I tried adding an svg text using the "x", "y", "width" and "height" attributes, and then prepending an svg rect. The problem is that the reference point for the text is in the middle (since I want it centered aligned I used text-anchor: middle), but for the rectangle it's the top left coordinate, plus I wanted a bit of margin around the text which makes it kind of a pain.

另一个选项是使用html div，这将是很好的，因为我可以直接添加文本和填充，但我不知道如何获得每个矩形的绝对坐标。有没有办法做到这一点？

The other option was using an html div, which would be nice, because I can add the text and padding directly but I don't know how to get the absolute coordinates for each rectangle. Is there a way to do this?

推荐答案

您可以使用标题元素指示为Phrogz。还有一些很好的工具提示，比如jQuery的Tipsy http://onehackoranother.com/projects/jquery/tipsy/ （其中可用于替换所有标题元素），Bob Monteverde的nvd3或甚至Twitter的工具提示从他们的Bootstrap http://twitter.github.com/ bootstrap /

You can use the title element as Phrogz indicated. There are also some good tooltips like jQuery's Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (which can be used to replace all title elements), Bob Monteverde's nvd3 or even the Twitter's tooltip from their Bootstrap http://twitter.github.com/bootstrap/

这篇关于如何向svg图形添加工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！