Buongiorno a tutti,
Ho un problema che mi sta tormentando da due giorni.

In pratica ho un file svg con una mappa interattiva.
Sto cercando di fare in modo che quando uno passa con il mouse sulla regione esca un tooltip con il nome della regione.

Seguendo varie guide su internet ho creato la parte javascript


codice:
  var tooltip;
      function init(evt)
      {
        if ( window.svgDocument == null )
        {
          svgDocument = evt.target.ownerDocument;
        }
        tooltip = svgDocument.getElementById('tooltip');
      }


      function ShowTooltip(evt)
      {
        tooltip.setAttributeNS(null,"x",evt.clientX-8);
        tooltip.setAttributeNS(null,"y",evt.clientY-5);
        tooltip.setAttributeNS(null,"visibility","visible");
        console.log(tooltip);
      }


      function HideTooltip()
      {
        tooltip.setAttributeNS(null,"visibility","hidden");
      }

poi in ogni Path della mappa svg ho inserito le due funzioni:
codice:
onmousemove="ShowTooltip(evt)
onmouseout="HideTooltip()
Il tooltip l'ho inserito nella parte finale del tag svg

codice HTML:
<text class="tooltip" id="tooltip" x="0" y="0" visibility="hidden">TooltipTooltip</text>
(TooltipTooltip è un testo di prova)


Ho provato a mettere un console.log del tooltip e le funzioni funzionano correttamente. il tooltip cambia descrizione tra "visibile" o "nascosto" a seconda del mouse.

Il problema è che non vedo MAI la scritta sulla mappa ne da nessuna parte nella pagina.

Qualcuno sa cosa sto sbagliando?

Ringrazio tutti anticipatamente