Tooltip not displaying on top of the element using d3.js on Mouseover

Question

I have a tooltip using d3.js

Here's my tooltip declaration

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");

My css:

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

The event:

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");
                      });

This code is working well but my problem is the tooltip displayed beside in the mouse pointer on hover event.

I've tried to change also something like:

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

But same i got no luck.

My question is it possible to move the cursor on top of every element on mouseover event has been fired?

Thanks in Advance

Answer 1

If I understand you correctly, you want something like this:

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