Tooltips on SVG elements always appear at the top-left.

[cueedee]

We wanted to set a tooltip on an SVG element (<g> in this case). For reasons I do not claim to understand, jQuery's .outerwidth() and .outerheight() methods applied to such elements just claim that their dimensions are 0, but the result definitely is tooltips having their arrows always positioned at the top-left of that element.

Researching this a bit more turned up the suggestion to use the browser native method el.getBoundingClientRect() instead - here, here and here - for which a quick debug session revealed it to return all the positions and dimensions you could ever hope to need, all combined in one neat little package.

So the question bears asking if a desire to include support for SVG's would warrant incorporating the use of getBoundingClientRect, either in favor of-, or in addition to the myriad of currently employed jQuery utilities.

[stefangabos]

sounds like a good idea. but there's more than just the <g> for a SVG. does it work when the tooltip is set on the <svg> tag? but i suppose you need it set on various parts of the SVG... i'll look into it

[cueedee]

jQuery's .offset(), outerWidth() and .outerHeight() do report the expected values when applied to an <svg>.

Interestingly, they also appear to handle the SVG <image> element correctly; so using that to embed the <g> contents as a separate <svg> could serve as a workaround I suppose. Not pretty, but it would work.