Tooltips show in the wrong position - d3.js

Question

I have three charts in different positions. The tooltips look fine for my first chart, but for the other two the tooltips show in the first chart.
I've tried BBbox and getboundindclientrect(), and none of them work for d3.select(this).
// This is my chart module, I'm struggling to get xPosition and yPosition right.
function chart(selection) {
innerWidth = width - margin.left - margin.right,
innerHeight = height - margin.top - margin.bottom,
selection.each(function (data) {
// Select the svg element, if it exists.
var svg = d3.select(this).selectAll("svg").data([data]);
// Otherwise, create the skeletal chart.
var svgEnter = svg.enter().append("svg");
var gEnter = svgEnter.append("g");
gEnter.append("g").attr("class", "x axis");
gEnter.append("g").attr("class", "y axis");
// Update the outer dimensions.
svg.merge(svgEnter).attr("width", width)
.attr("height", height);
// Update the inner dimensions.
var g = svg.merge(svgEnter).select("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
xScale.rangeRound([0, innerWidth])
.domain(data.map(xValue)); //xValue = function(d) { return d[0]; }
yScale.rangeRound([innerHeight, 0])
.domain([0, d3.max(data, yValue)]);
g.select(".x.axis")
.attr("transform", "translate(0," + innerHeight + ")")
.call(d3.axisBottom(xScale));
g.select(".y.axis")
.call(d3.axisLeft(yScale).ticks(10))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Frequency");
var bars = g.selectAll(".bar")
.data(function (d) { return d; });
bars.enter().append("rect")
.attr("class", "bar")
.merge(bars)
.attr("x", X) // function X(d) {return xScale(xValue(d));}
.attr("y", Y)
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return innerHeight - Y(d); })
.attr("fill", "rgb(0, 18, 65") // International Klein blue
.on("mouseover", function(d) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth()/2; // + parseFloat(bars.node().getBBox().x);
var yPosition = parseFloat(d3.select(this).attr("y"))/2 + innerHeight/2;
//Update the tooltip position and value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(yValue(d));
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
})
.on("click", onClick);
bars.exit().remove();
});
}
I'd like to get the tooltips on top of my rectangles when I place the mouse over them.