Titel Attribut funktioniert nicht für ein SVG Rect auf Safari

Question

Ich habe eine SVG mit d3 erstellt, die Titelattribute für alle Quicklinks für QuickInfo-Popups hat. Der Code funktioniert gut in Firefox, aber die Tooltips erscheinen nicht in Safari - weder Mac noch Windows. Ich weiß, dass das Titelattribut richtig eingestellt ist, wie ich es im Safari Web Inspector sehen kann.

d3 Code Schnipsel:

.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 aus dem Web-Inspektoren einen Teil des generierten HTML zeigt:

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

Vielen Dank für jede Hilfe

Answer 1

SVG-Elemente ein Titel-Attribut nicht . Um den Effekt eines HTML-Titelattributs zu erhalten, müssen Sie ein Kindtitelelement hinzufügen, z.

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