tooltip responsive inside a div - not showing

Question

I would like to insert a d3 chart on a div in html but Tootlip is not working or not showing in html. what am I doing wrong?

code

<div id="mainTooltip" class="hidden">

Answer 1

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) {

      d3.select("#centerTooltip")
        .classed("hidden", false)
        .html(d.data.str_lab + "<br />" + d.data.num);
  })

And in the div wrapper css I added:

#all {
  margin:auto;
  width: 700px;
}

To make sure that everything aligns properly.

Here's a fork of your code: Plunker