How to add a tooltip to an svg graphic?

by

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

More Related Contents:

  1. Scaling d3 v4 map to fit SVG (or at all)
  2. How do I include newlines in labels in D3 charts?
  3. How can d3.transform be used in d3 v4?
  4. Updating SVG Element Z-Index With D3
  5. D3 Appending Text to a SVG Rectangle
  6. d3 add text to circle
  7. In d3, how to get the interpolated line data from a SVG line?
  8. Creating and appending detached elements with d3.create
  9. Label outside arc (Pie chart) d3.js
  10. D3js take data from an array instead of a file
  11. Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?
  12. Where is d3.svg.diagonal()?
  13. How to draw a path smoothly from start point to end point in D3.js
  14. (Embed and) Refer to an external SVG via D3 and/or javascript
  15. Plotting points on a map with D3
  16. D3 fill shape with image using pattern
  17. D3 – how to deal with JSON data structures?
  18. Setting rounded corners for svg:image
  19. Circles in Map Displayed Incorrect Location in D3 V4
  20. How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
  21. svg / d3.js rounded corners on one side of a rectangle
  22. SVG to Canvas with d3.js
  23. Add names of the states to a map in d3.js
  24. How do I return y coordinate of a path in d3.js?
  25. Display an arrow head in the middle of D3 force layout link
  26. Calculate SVG Path Centroid with D3.js
  27. Can’t make paths draw growing slowly with D3
  28. draw text in d3 arc javascript
  29. D3 put arc labels in a Pie Chart if there is enough space
  30. D3.js: Position tooltips using element position, not mouse position?

Leave a Comment