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?
This question is related to
javascript
svg
d3.js
tooltip
The answer is
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 {_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
fill: #69c;_x000D_
stroke: #069;_x000D_
stroke-width: 5px;_x000D_
opacity: 0.5_x000D_
}<p>Mouseover the rect to see the tooltip on supporting browsers.</p>_x000D_
_x000D_
<svg xmlns="http://www.w3.org/2000/svg">_x000D_
<rect>_x000D_
<title>Hello, World!</title>_x000D_
</rect>_x000D_
</svg>Alternatively, if you really want to show HTML in your SVG, you can embed HTML directly:
rect {_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
fill: #69c;_x000D_
stroke: #069;_x000D_
stroke-width: 5px;_x000D_
opacity: 0.5_x000D_
}_x000D_
_x000D_
foreignObject {_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
svg div {_x000D_
text-align: center;_x000D_
line-height: 150px;_x000D_
}<svg xmlns="http://www.w3.org/2000/svg">_x000D_
<rect/>_x000D_
<foreignObject>_x000D_
<body xmlns="http://www.w3.org/1999/xhtml">_x000D_
<div>_x000D_
Hello, <b>World</b>!_x000D_
</div>_x000D_
</body> _x000D_
</foreignObject>_x000D_
</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
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) {_x000D_
let tooltip = document.getElementById("tooltip");_x000D_
tooltip.innerHTML = text;_x000D_
tooltip.style.display = "block";_x000D_
tooltip.style.left = evt.pageX + 10 + 'px';_x000D_
tooltip.style.top = evt.pageY + 10 + 'px';_x000D_
}_x000D_
_x000D_
function hideTooltip() {_x000D_
var tooltip = document.getElementById("tooltip");_x000D_
tooltip.style.display = "none";_x000D_
}#tooltip {_x000D_
background: cornsilk;_x000D_
border: 1px solid black;_x000D_
border-radius: 5px;_x000D_
padding: 5px;_x000D_
}<div id="tooltip" display="none" style="position: absolute; display: none;"></div>_x000D_
_x000D_
<svg>_x000D_
<rect width="100" height="50" style="fill: blue;" onmousemove="showTooltip(evt, 'This is blue');" onmouseout="hideTooltip();" >_x000D_
</rect>_x000D_
</svg>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;
}<div class="mzhrttltp"><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#e2062c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><div class="hrttltptxt">?????‌????‌??</div></div>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...
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/
Source: Stackoverflow.com