Title Attribute not working for an SVG Rect on Safari

Question

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

Solution

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>