HTML 工具提示在 html 元素后面

Question

我正在开发一个可以在平面图之间循环的应用程序。我使用 d3.js 和 d3.geo 绘制平面图。用户将使用下拉菜单 select 所需的平面布置图。每个平面图都有一个显示用户信息的工具提示。现在，工具提示位于绘制平面图的 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

希望我理解正确，你是想把工具提示前移，对吧？您必须使用样式或 css class 添加 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>

Answer 2

尝试将工具提示的 z-index 更改为 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);

HTML 工具提示在 html 元素后面

HTML tooltip is behind the html element

html

javascript

svg

tooltip