D3: Mouseover to display data in top right corner - d3.js

Question

I'm working in D3 with a tooltip in a mouseover event. What I have is the data displayed slightly to the right and above the dot. However, it's a line graph and this is sometimes unreadable. What I would like is the data displayed in some fixed position (I've decided the upper right hand corner is free of clutter). Can anyone give me some advice? Code below
.on("mouseover", function(d) {
d3.select(this).attr("r", 5.5).style("fill", "red");
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html("(" + xTemp(d)
+ ", " + yTemp(d)+ ")")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");

Answer 1

I assume your tooltip is a <div> with position: absolute.
In that case, you can wrap your SVG in a container div (since SVGs don't support offsetTop and offsetLeft) and set the position of your tooltip using offsetTop and offsetLeft.
Here is a simple demo. I put two paragraphs ("Foo" and "Bar"), so you can see that the position of the <div> is correct, even if the SVG is not the first element on the page:
var svg = d3.select("svg");
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
svg.selectAll(null)
.data(d3.range(50, 300, 50))
.enter()
.append("circle")
.attr("cx", Number)
.attr("cy", 100)
.attr("r", 20)
.style("fill", "teal")
.on("mouseover", function(d) {
d3.select(this).style("fill", "red");
tooltip.html(d)
.style("top", svg.node().parentNode.offsetTop + 10 + "px")
.style("left", svg.node().parentNode.offsetLeft + 270 + "px")
.style("opacity", .9);
})
.on("mouseout", function() {
d3.select(this).style("fill", "teal")
tooltip.style("opacity", 0)
})
svg {
border: 1px solid gray;
}
.tooltip {
position: absolute;
broder: 1px solid black;
background-color: tan;
padding: 2px;
border-radius: 2px;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<p>Foo</p>
<p>Bar</p>
<div>
<svg id="svg"></svg>
</div>