SVG use element tooltip

Question

Is it possible to have the < use > element display the rect tooltip, on mouse over, with modern browsers?

As specified by 15.2.1 The hint element.

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

Do you mean like creating a custom Angular directive called that would fire off an event to show a tooltip with this SVG image? — phteven, Apr 26 '16 at 04:45
Only via some custom javascript which would copy the title into the use as a child element. — Robert Longson, Apr 26 '16 at 06:16

score 0 · Answer 1 · edited May 23 '17 at 11:45

There appears to be no way to do this without JavaScript, using getBoundingClientRect() to location the position of the SVG in the DOM. Good stuff in here: How to add a tooltip to an svg graphic. Even then, I'm not sure how well supported and easy to style that direction would be.

However, a possible workaround is to add another wrapper around symbol and tie CSS into it when hovering on the pseudoclass. Using attr(data-tooltip) is not as nice as using content directly inherited by the symbol, but it's not a terrible second place.

For example:

<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

SVG use element tooltip

1 Answers1