How to display a tooltip on a SVG tag that has been defined in a SVG part?

Question

I have generated an HTML/SVG file that display the same electrical symbols more time.

I search now to display a tooltip with some information linked to displayed SVG "symbol".

Since same symbol are used more times, I have define a symbol in <defs> part in <svg> bloc.

Electrical symbol are displayed using <use> SVG tag.

Each <use> tag are followed by a <html:div> tag that contains string to display in tooltip.

The algorithm that I use to find String to display in tooltip is following:

in MouseOver event, I search a SIBLING element of <use> tag
I check if sibling element is a html:div element with classname = 'info'
I put HTML part found in html:div in tooltip element
I change opacity attribute of tooltip so it is visible

The problem (case 1,2,4 and 5 in example) is that in all situations sibling element is always sibling of <g> tag defined in <defs> part and not sibling element of <use> tag.

My algorithm work only for case 3.

In this case, I have replaced <use> tag by what has been defined in <defs> part.

QUESTION: how can I add a tooltip to a <use> tag or using a <use> tag ?

$(document).ready(function() {

var tooltip = d3.select("div.tooltip");

d3.select("svg").selectAll("g")
    .on("mouseover", function ()
        {
        var sTooltip = "Tooltip: ?";
  
        if (this.id.startsWith("u"))
            {
            sId = this.id + "info";
            var e = document.getElementById(sId);
            if (e != null)
                {
                sTooltip = e.innerHTML;
                }
            }
        else
            {  
            var e = this.nextElementSibling;
            if (e != null)
                {
                if (e.className.baseVal == "info")
                    {
                    sTooltip = e.innerHTML;
                    }
                }
            }
   
        document.getElementById('tooltip').innerHTML = sTooltip;
        tooltip.style("opacity", "1");
        })

    .on("mousemove", function ()
        {
        tooltip.style("left", (d3.event.pageX + 10) + "px");
        tooltip.style("top", (d3.event.pageY + 10) + "px");
        })

    .on("mouseout", function ()
        {
        return tooltip.style("opacity", "0");
        });

});

.tooltip {
    pointer-events:none;
    opacity: 0;
    transition: opacity 0.4s;
    padding-left: 10px;
    padding-right: 10px;
    }

div.tooltip {
    background: yellow;
    border:solid gray;
    position: absolute;
    max-width: 300px;
    text-align:center;
    }
svg {
    margin:10px 20px;
    overflow:visible; 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p>
<b>Electricité: plan Unifilaire</b>
</p>
<svg xmlns='http://www.w3.org/2000/svg' version='2.0' width='8000px' height='6000px'>
<defs>
  <g id="prise">
    <path d="m40,-20 a20,20 0 0,0 0,40 z" fill="white" stroke="white" stroke-width="2" />
    <line x1="0" y1="0" x2="20" y2="0" stroke="blue" stroke-width="2" />
    <line x1="20" y1="-15" x2="20" y2="15" stroke="blue" stroke-width="2" />
    <path d="m40,-20 a20,20 0 0,0 0,40" fill="white" stroke="blue" stroke-width="2" />
    <line x1="40" y1="-20" x2="40" y2="-28" stroke="blue" stroke-width="2" />
    <line x1="40" y1="20" x2="40" y2="28" stroke="blue" stroke-width="2" />
  </g>
</defs>

<text x='50' y='40' font-size='20'>1.</text>
<use href='#prise' x='100' y='40'/>

<text x='50' y='100' font-size='20'>2.</text>
<use href='#prise' x='100' y='100'/>
<html:div class="info">
    prise à droite de la porte de la chambre Est
</html:div>

<text x='50' y='160' font-size='20'>3.</text>
<g id="interrupteur" transform="translate(100 160)">
  <path d="m40,-20 a20,20 0 0,0 0,40 z" fill="white" stroke="white" stroke-width="2" />
  <line x1="0" y1="0" x2="20" y2="0" stroke="red" stroke-width="2" />
  <line x1="20" y1="-15" x2="20" y2="15" stroke="red" stroke-width="2" />
  <path d="m40,-20 a20,20 0 0,0 0,40" fill="white" stroke="red" stroke-width="2" />
  <line x1="40" y1="-20" x2="40" y2="-28" stroke="red" stroke-width="2" />
  <line x1="40" y1="20" x2="40" y2="28" stroke="red" stroke-width="2" />
</g>
<html:div class="info">
  interrupteur de la lampe de la cuisine
</html:div>

<text x='50' y='220' font-size='20'>4.</text>
<g>
<use href='#prise' x='100' y='220' stroke='green'/>
<text font-size="12" style="display:none">prise de la machine à laver à la cave</text>
</g>

<text x='50' y='280' font-size='20'>5.</text>
<use id='u258' href='#prise' x='100' y='280'/>
<html:div id="u258info">
  prise de la machine à laver à la cave
</html:div>
  
</svg>

<div id="tooltip" class="tooltip">
  Tooltip: ?
</div>

</body>
</html>

schlebe · Answer 1 · 2020-03-23T07:55:19.297

After night, I have found my error !

In Javascript code, I have replaced

d3.select("svg").selectAll("g")

by

d3.select("svg").selectAll("use")

and now only case 2 et 5 works correctly.

Now, in my work, I will use following JavaScript code

$(document).ready(function() {

var tooltip = d3.select("div.tooltip");

d3.select("svg").selectAll("use")
    .on("mouseover", function ()
        {
        var sTooltip = "Tooltip: ?";

        var e = this.nextElementSibling;
        if (e != null)
            {
            if (e.className.baseVal == "info")
                {
                sTooltip = e.innerHTML;
                }
            }

        document.getElementById('tooltip').innerHTML = sTooltip;
        tooltip.style("opacity", "1");
        })

    .on("mousemove", function ()
        {
        tooltip.style("left", (d3.event.pageX + 10) + "px");
        tooltip.style("top", (d3.event.pageY + 10) + "px");
        })

    .on("mouseout", function ()
        {
        return tooltip.style("opacity", "0");
        });

});

How to display a tooltip on a SVG tag that has been defined in a SVG part?

1 Answers1