How to add a tooltip to an svg graphic?

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 }

Mouseover the rect to see the tooltip on supporting browsers.

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; }

…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

---

The only good way I found was to use Javascript to move a tooltip <div> around. Obviously this only works if you have SVG inside an HTML document - not standalone. And it requires Javascript.

function showTooltip(evt, text) { let tooltip = document.getElementById("tooltip"); tooltip.innerHTML = text; tooltip.style.display = "block"; tooltip.style.left = evt.pageX + 10 + 'px'; tooltip.style.top = evt.pageY + 10 + 'px'; } function hideTooltip() { var tooltip = document.getElementById("tooltip"); tooltip.style.display = "none"; } #tooltip { background: cornsilk; border: 1px solid black; border-radius: 5px; padding: 5px; }

---

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/

---

On svg, the right way to write the title

<svg>
  <title id="unique-id">Checkout</title>
</svg>

check here for more details https://css-tricks.com/svg-title-vs-html-title-attribute/

---

I came up with something using HTML + CSS only. Hope it works for you

.mzhrttltp { position: relative; display: inline-block; } .mzhrttltp .hrttltptxt { visibility: hidden; width: 120px; background-color: #040505; font-size:13px;color:#fff;font-family:IranYekanWeb; text-align: center; border-radius: 3px; padding: 4px 0; position: absolute; z-index: 1; top: 105%; left: 50%; margin-left: -60px; } .mzhrttltp .hrttltptxt::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #040505 transparent; } .mzhrttltp:hover .hrttltptxt { visibility: visible; }

---

I always go with the generic css title with my setup. I'm just building analytics for my blog admin page. I don't need anything fancy. Here's some code...

let comps = g.selectAll('.myClass')
   .data(data)
   .enter()
   .append('rect')
   ...styling...
   ...transitions...
   ...whatever...

g.selectAll('.myClass')
   .append('svg:title')
   .text((d, i) => d.name + '-' + i);

And a screenshot of chrome...

https://i.stack.imgur.com/cuXW8.png

---

I use heroicons for the project I am working on. (This is JSX format) I will handle the tooltip issue with this code.

<svg className="h-6 w-6">
        <title>{reasons.join(" ")}</title>
        <QuestionMarkCircleIcon className={style} />
      </svg>

---