I have an SVG created with d3 that has title attributes set on all of the rects for tooltip popups. The code works fine in Firefox, but the tooltips don't show up in Safari--neither Mac or Windows. I know the title attribute is being properly set as I can see it in the Safari Web Inspector.
d3 code snip:
.append("rect") .attr("class", "hmCell") .attr("x", function(d,i) { return cellWidth*i; }) .attr("y", 0 ) .attr("width", cellWidth-cellPadding ) .attr("height", cellHeight-cellPadding ) .style("fill", function(d,i){ return colorScales[i](d); }) .attr("title", function(d,i) { return coldata[i]['PrintName']+": "+d; });
Snippet from the Web inspector showing some of the generated html:
<rect class="hmCell" x="0" y="0" width="34" height="11" style="fill: #9fee49; " title="V1: Derek"></rect> <rect class="hmCell" x="35" y="0" width="34" height="11" style="fill: #ee99bb; " title="V2: Blue"></rect>
Thanks for any help
Title and DescriptionIf an SVG image is purely decorative, do not include a title or description. The SVG element should additional be identified as presentational using the ARIA role attribute.
The xlink:title attribute is used to describe the meaning of a link or resource in a human-readable fashion. The use of this information is highly dependent on the type of processing being done.
SVG elements do not have a title attribute. To get the effect of an html title attribute you need to add a child title element e.g.
<svg viewBox="0 0 50 50"> <rect class="hmCell" x="0" y="0" width="34" height="11" style="fill: #9fee49; "> <title>V1: Derek</title> </rect> </svg>
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