d3工具提示未显示但似乎正在运行

Question

当我将鼠标悬停在数据上时，我的工具提示没有显示。是因为它藏在我的热图后面吗？我不确定要显示它需要做什么。我玩过不透明但是什么也没有。

    // create a tooltip
      var tooltip = d3.select("#heatmap")
        .append("div")
        .style("opacity", 0)
        .attr("class", "tooltip")
        .style("background-color", "black")
        .style("border", "solid")
        .style("border-width", "2px")
        .style("border-radius", "5px")
        .style("padding", "5px")

    var mouseover = function(d) {
        tooltip.style("opacity", 1)
      }
      var mousemove = function(d) {
        tooltip
          .html("The exact value of<br>this cell is: " + d.value)
          .style("left", (d3.mouse(this)[0]+10) + "px")
          .style("top", (d3.mouse(this)[1]) + "px")
      }
      var mouseleave = function(d) {
        tooltip.style("opacity", 0)
      }

var heatmap = svg.selectAll(".hour")
        .data(selectCategory.values)
        .enter()
        .append("rect")
        .attr("x", function(d) { return x(d.States)  ; })

        .attr("y", function(d) { return y(d.Year) ; })
        .attr("class", "hour bordered")
        .attr("width", 30)
        .attr("height", 30)
        .style("stroke", "white")
        .style("stroke-opacity", 0.6)
        .style("fill", function(d) { return z(d.Value); })
        .on("mouseover", mouseover)
        .on("mousemove", mousemove)
        .on("mouseleave", mouseleave)
      }

任何帮助将不胜感激。