I have a codepen here - <https://codepen.io/anon/pen/yvgJKB>

I have two d3 charts with different data.

I want to have tooltips on the bars so when you rollover them it shows the value.

I want the tooltip to be separate html in the svg cos the actual charts are responsive and I dont want the tooltips to scale with the svg.

The tooltip works as expected in the top chart.

In the bottom chart the tooltip appears in the top chart.

I think this is becasue the `let tooltip = d3.select('.tooltip').append("div")` is selecting the first tooltip which is in the first chart.

The charts and tooltip is dynamically created.

This there a way in the D3 to say `d3.select('.tooltip')` in this svg something like `d3.select(this)('.tooltip')`

```
let tooltip = d3.select('.tooltip').append("div")
    .attr("class", "tip")
    .style("display", "none")
    .attr("fill", "grey");

```