Menu
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?
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.
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?
652
Usage. Via data attributes − To add a tooltip, add data-toggle = "tooltip" to an anchor tag. The title of the anchor will be the text of a tooltip. By default, tooltip is set to top by the plugin.
There are two possible methods of creating tooltips in D3. js. The first method is by creating the SVG <title> tags as a descendant of an interactable element. The second approach is to use mouseover , mosueleave , and mousemove events to dynamically move and change the visibility of a tooltip.
Tooltips display text (or other content) when you hover over an HTML element. The w3-tooltip class defines the element to hover over (the tooltip container). The w3-text class defines the tooltip text.
Can you use simply the SVG <title> element and the default browser rendering it conveys? (Note: this is not the same as the title attribute you can use on div/img/spans in html, it needs to be a child element named title)
rect { width: 100%; height: 100%; fill: #69c; stroke: #069; stroke-width: 5px; opacity: 0.5 }<p>Mouseover the rect to see the tooltip on supporting browsers.</p> <svg xmlns="http://www.w3.org/2000/svg"> <rect> <title>Hello, World!</title> </rect> </svg>Alternatively, if you really want to show HTML in your SVG, you can embed HTML directly:
rect { width: 100%; height: 100%; fill: #69c; stroke: #069; stroke-width: 5px; opacity: 0.5 } foreignObject { width: 100%; } svg div { text-align: center; line-height: 150px; }<svg xmlns="http://www.w3.org/2000/svg"> <rect/> <foreignObject> <body xmlns="http://www.w3.org/1999/xhtml"> <div> Hello, <b>World</b>! </div> </body> </foreignObject> </svg>…but then you'd need JS to turn the display on and off. As shown above, one way to make the label appear at the right spot is to wrap the rect and HTML in the same <g> that positions them both together.
To use JS to find where an SVG element is on screen, you can use getBoundingClientRect(), e.g. http://phrogz.net/svg/html_location_in_svg_in_html.xhtml
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
