SVG verwenden Element tooltip

Question

Ist es möglich, das < use > Element den Richtigen Tooltip anzuzeigen, mit der Maus über, mit modernen Browsern?

Wie durch 15.2.1 The hint element spezifiziert.

<svg id="schematic" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <symbol id="pnp-transistor"> 
     <image xlink:href="transistor.png" height="32px" width="32px" /> 

     <rect y="0" x="0" height="6px" width="32px"> 
      <title>collector</title> 
      <hint>collector</hint> 
     </rect> 

     <rect y="27" x="0" height="6px" width="32px"> 
      <title>emitter</title> 
      <hint>emitter</hint> 
     </rect> 

     <rect y="0" x="0" height="32px" width="6px"> 
      <title>base</title> 
      <hint>base</hint> 
     </rect> 
    </symbol> 

    <use xlink:href="#pnp-transistor"></use> 
</svg> 

Answer 1

Es scheint kein Weg, dies ohne JavaScript zu tun, getBoundingClientRect() zu Ort, um die Position des SVG im DOM verwenden. Gute Sachen hier: How to add a tooltip to an svg graphic. Selbst dann bin ich nicht sicher, wie gut unterstützt und einfach diese Richtung zu stylen wäre.

Eine mögliche Problemumgehung besteht jedoch darin, einen weiteren Wrapper um ein Symbol hinzuzufügen und CSS daran zu binden, wenn Sie auf der Pseudoklasse verweilen. Die Verwendung von attr(data-tooltip) ist nicht so schön wie die Verwendung von direkt vom Symbol geerbten Inhalten, aber es ist kein schrecklicher zweiter Platz.

Zum Beispiel:

<div class="wrapper" data-tooltip="SVG Tooltip (almost)"> 
    <svg class="icon"><use xlink:href="#some-id"></use></svg> 
</div> 

...

.wrapper:after { 
    position: absolute; 
    left: 50%; 
    transition: 0.5s; 
    content: attr(data-tooltip); 
    white-space: nowrap; 
    opacity: 0; 
    font-size: 1.5rem; 
    transform: translate(-50%, 0); 
} 

.wrapper:hover:after { 
    position: absolute; 
    opacity: 1; 
    transform: translate(-50%, 0.5em); 
} 

Codepen: SVG With Pure CSS Tooltip