HTML工具提示位于html元素后面。

Question

我正在构建一个可以在平面图之间循环的应用程序。我使用d3.js和d3.geo绘制平面图。用户将使用下拉菜单选择所需的平面图。每个平面布置图都有一个显示用户信息的工具提示。现在，工具提示位于绘制平面图的svg元素的后面。我似乎想不出如何让它出现在html元素的前面？每个平面布置图都有自己的SVG元素。

您可以在这里查看当前的构建https://public-floorplan.web.app/

这是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()
          })

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

和用于工具提示的javascript

//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 + "ft²</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")
          })

谢谢你的帮助

Answer 1

尝试将工具提示的z索引更改为2。如下所示：

tooltip
              .html("<strong>" + d.properties.name + " data: </strong>  <p> Visitors Today: " + d.properties.visitors + "</p> <p> Square feet: " + area + "ft²</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);

Answer 2

我希望我正确地理解了这个问题，您正在尝试将工具提示向前推进，对吗？您必须添加带有样式或css类的z-index，如下所示

<div id="tooltip" style="opacity: 1; display: none; color: rgb(255, 255, 255); z-index: 1000;"><strong>Room 33 data: </strong>  <p> Visitors Today: 10</p> <p> Square feet: 0ft²</p></div>