如何向 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"、宽度"和高度"属性添加一个 svg 文本，然后添加一个 svg 矩形.问题是文本的参考点在中间(因为我希望它居中对齐，所以我使用了 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/引导程序/

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屋！