Невозможно отобразить всплывающую подсказку d3 поверх svg

Question

В моем svg я визуализировал несколько восклицательных знаков, и при наведении курсора я хочу, чтобы они имели какое-то основное всплывающее окно с соответствующим текстом.Мне удается заставить текст появляться, но только над или под svg, а не поверх него.Я попытался изменить z-индексы и попытался определить div в html вместо того, чтобы добавлять их из файла js, но безрезультатно.

Первый блок - это функция всплывающей подсказки, которая вызывается в концеНаведите курсор мыши на функцию.Второй блок - это HTML-код.После этого вы можете найти некоторые css и изображение текущей визуализации (тот, на котором я висел, - более легкий восклицательный знак).

function tooltipf(d){
            var apptooltip = d3.select("body").append("div");
            tooltip = apptooltip["_groups"][0][0];
            tooltip.setAttribute("id", "tooltip");
            document.getElementById("dataViz").appendChild(tooltip);

            var p1 = document.createElement("p");
            p1.setAttribute("id", "p1");
            document.getElementById("tooltip").appendChild(p1);

            var head = document.createElement("span");
            head.setAttribute("id", "tooltip_header");
            document.getElementById("p1").appendChild(head);

            var p2 = document.createElement("p");
            p2.setAttribute("id", "p2");
            document.getElementById("tooltip").appendChild(p2);

            var text = document.createElement("span");
            text.setAttribute("id", "tooltip_text");
            document.getElementById("p2").appendChild(text);

          // console.log(d.type);
          tooltip = d3.select("#tooltip")
          tooltip.select("#tooltip_header").html(d.popup_header);
          tooltip.select("#tooltip_text").html(d.popup_text);
          tooltip.attr("x", x(d.x))
          tooltip.attr("y", y(d.y))        

          var title = document.getElementById("tooltip_header");
          var title_text = title.innerHTML;
          var text = document.getElementById("tooltip_text");
          var text_text = text.innerHTML;
          if (title_text && text_text) {
            d3.select("#tooltip").style('display', 'block')
          }  
          return tooltip.style("top", (d3.event.pageY-10)+"px") 
          .style("left",(d3.event.pageX+10)+"px");

 }

<div id="d3_static" class="w3-row-padding w3-center w3-padding-64 micado_d3_container">
  <div id="dataViz">
    <!-- Julias D3 container -->
    <!-- <div id="tooltip"> -->
      <!-- <p><span id="tooltip_header"></span></p> -->
      <!-- <p><span id="tooltip_text"></span></p> -->
    <!-- </div> -->
  </div>
</div>

#dataViz {
    z-index: -1;
}

.circle_domain {
    /*fill: rgb(244, 169, 0);*/
    /*opacity: 1;*/
    border: dashed 2px blue;
    stroke:  #a8a8a8;
    stroke-dasharray: 6;
    stroke-width: 5px;
    fill: #f4f5e6;
    z-index: 2;
    opacity: 0.8;
}

.circle_ISCED {
    fill: #4a4a4a;
    opacity: 0.8;
}

.challenge {
    fill: #538c85;
    stroke-width: 0;
    opacity:1;
}

.tooltip {
      position: absolute;
      width: 200px;
      height: auto;
      padding: 10px;
      top: 0;
      left: 100px;
      background-color: white;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
      box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
      pointer-events: none;
      z-index: 1000;
    }

    .tooltip p {
      margin: 0;
      font-family: Futura;
      font-size: 16px;
      line-height: 20px;
    }