Всплывающая подсказка не отображается поверх элемента с помощью d3.js при наведении мыши

Question

У меня есть всплывающая подсказка с использованием d3.js

Вот мое объявление всплывающей подсказки

var tooltip = d3.select("body")
                    .append("div")
                    .style("position", "absolute")
                    .style("z-index", "10")
                    .style("visibility", "hidden")
                    .style("background", "white")
                    .style("text-align", "center")
                    .style("font-size", "15px")
                    .attr("class", "shade")
                    .text("a simple tooltip");

Мой css:

 .shade {
          border: 1px solid #e6e6e6;
          padding: 10px;
          box-shadow: 3px 2px #888888;
          width:90px;
          height:80px;
          text-align:center;
}

Событие:

state.selectAll("rect")
                      .data(function (d) { return d.ages})
                      .enter().append("rect")
                      .attr("width", x1.rangeBand())
                      .attr("x", function (d) { return x1(d.name); })
                      .attr("y", function (d) { return y(d.value); })
                      .attr("height", function (d) { return height - y(d.value); })
                      .style("fill", function (d) { return color(d.name); })
                      .on("mouseover", function (d) {

                              tooltip.text("")
                              var tooltext = tooltip.append('label')
                              tooltext.text(d.name).attr("class","middleText")
                              tooltip.append("br")
                              var labeltooltip = tooltip.append('label').attr('class', GetColor(d.name))
                              labeltooltip.text(d.value)

                          return tooltip.style("visibility", "visible");
                      })
                      .on("mousemove", function () { return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px"); })
                      .on("mouseout", function () {

                          return tooltip.style("visibility", "hidden");
                      });

Этот код работает хорошо, но моя проблема в том, что всплывающая подсказка отображается рядом с указателем мыши при событии наведения мыши.

Я также пытался изменить что-то вроде:

 .on("mousemove", function () { return tooltip.style("top", d + "px").style("left", d + "px"); })

Но все же мне не повезло.

Мой вопрос, можно ли переместить курсор на top каждого элемента при наведении мыши на событие?

Заранее спасибо

Answer 1

Если я вас правильно понимаю, вы хотите что-то вроде этого:

.on("mousemove", function () { 
  return tooltip.style("top", this.getBBox().y + "px").style("left", this.getBBox().x + "px"); 
});