javascript - HTML tooltip is behind the html element

Question

I am working on building an app that can cycle between floorplans. I draw the floorplans using d3.js and d3.geo. The user would select the desired floorplan using a dropdown menu. Each floorplan has a tooltip that shows the user information. Right now the tooltip is behind the svg elements where the floorplan is drawn on. I cant seem to figure out how to get it to be in front of the html elements? Each floorplan is on its own SVG elements.

You can look at the current build here https://public-floorplan.web.app/

Here is the Javascript

// //select all svg elements and make them invisible then turn selected one on.

      let i = 0
      for(i; i < 3; i++){
        d3.select("#svg"+i)
          .style("visibility", "hidden")
      }


      var svg = d3.select("#svg"+input)
      svg.style("visibility", "visible")
      let self = this
      var tooltip = d3.select("#tooltip")

      d3.json(buildings[input].source).then(function (data, i) {


        

        var projection = d3.geoIdentity().fitSize([800, 800], data)
        var path = d3.geoPath(projection)

        //drawing the floormap to svg element
        svg.selectAll("path")
          // svg.selectAll("path")
          .data(data.features)
          .enter()
          .append("path")
          .attr("d", path)
          .attr("fill", "#f5f5f5")
          .attr("stroke", "black")
          .attr("stroke-width", 1.5)
          .attr("id", function (d, i) {
            return "room_" + (i) //setting each room to have individual ID. EX room_[index]
          })
          .on("contextmenu", function (d) {
            event.preventDefault()
          })

Here is the HTML

  <!--END!-->
      </header>
      <div id="tooltip"></div>

      <!--floor map SVGs!-->

      <div class="container" style="padding-top: 100px; padding-left: 100px">
        <div class="sub-container" v-for="(building,i) in buildings" :key="i">
            <svg :id="'svg' + i"   width="850" height="800" style="position: absolute"></svg>
        </div>
      </div>

And the javascript for the tooltip

//creating a tooltip when hovering over the room
        var svgTooltip = svg.selectAll("path")
          .on("mousemove", function (event, d) {

            
            // //console.log(d.geometry.coordinates[0][1][1])
            // console.log(d.geometry.coordinates[0][0][1])

            console.log(d.geometry)
            var roomHeight = d.geometry.coordinates[0][1][1] - d.geometry.coordinates[0][2][1] //top left y-coor - bottom left y-coor
            var roomWidth = d.geometry.coordinates[0][1][0] - d.geometry.coordinates[0][0][0] //bottom right x-coor - bottom left x-coor 
            //console.log(d.geometry.coordinates[0][1][1] - d.geometry.coordinates[0][0][1])
            //console.log(roomWidth)

            var area = roomHeight * roomWidth//calc the area of the room. Assumed in feet squared and round to nearest integer 
            //console.log(area)
            if(area < 0){
              area *= -1
            }
            
            tooltip
              .html("<strong>" + d.properties.name + " data: </strong>  <p> Visitors Today: " + d.properties.visitors + "</p> <p> Square feet: " + area + "ft2</p>")
              .style("opacity", 1)
              .style("display", "block")
              .style("left", (event.pageX - 180) + 'px') //event.pageX & event.pageY refer to the mouse Coors on the webpage, not the Coors inside the svg
              .style("top", (event.pageY - 75) + 'px');
          })
          .on("mouseleave", function () {
            tooltip
              .style("display", "none")
              .style("left", null)
              .style("top", null)
              .transition()
              .duration(1000)
              .style("color", "#fff")
          })

Thank you for anyhelp

Answer 1

Try to change the z-index of the tooltip to 2. Something like:

tooltip
              .html("<strong>" + d.properties.name + " data: </strong>  <p> Visitors Today: " + d.properties.visitors + "</p> <p> Square feet: " + area + "ft2</p>")
              .style("opacity", 1)
              .style("display", "block")
              .style("left", (event.pageX - 180) + 'px') //event.pageX & event.pageY refer to the mouse Coors on the webpage, not the Coors inside the svg
              .style("top", (event.pageY - 75) + 'px')
              .style("z-index", 2);