Accepted answer

I added a new div and wrapped your code in another div so all positions stay relative to eachother

The only new code I had to add was this:

  .on("mouseover", function(d) {"#centerTooltip")
        .classed("hidden", false)
        .html( + "<br />" +;

And in the div wrapper css I added:

#all {
  width: 700px;

To make sure that everything aligns properly.

Here's a fork of your code: Plunker

Related Query

More Query from same tag