如何在D3图表中定位工具提示

Question

我正在将工具提示添加到D3散点图中，我不确定如何定位它们。它们出现在图表的左侧。我以为它们会嵌套在我的图表div中，以便style: left可以处理它。高度对我来说没问题。

相关代码：

                        d3.select("#chart")
                        .append("svg")
                        .attr("height",height)
                        .attr("width",width)
                        .style("background","#3A5FCD")
                        .selectAll("circle").data(employeecontributionaged)
                        .enter().append("circle")
                        .attr('cx',function(d,i) {
                            return i*(barWidth + barOffset);
                        })
                        .attr('cy',function(d) {
                           return height-yScale(d)
                        })
                        .attr('r',5)
                        .attr("fill","#000000")
                        .on("mouseover", function(d,i) {        
                                div.transition()
                                    .duration(50)
                                    .style("opacity", .9);
                                div.html("Age: " + i + "<br>Employee Contribution Value: " + d.formatMoney(2,'.',','))
                                    .style("left", i*(barWidth + barOffset) + "px")
                                    .style("top", height-yScale(d) + "px");
                            })
                            .on("mouseout", function (d) {
                                div.transition()
                                    .duration(50)
                                    .style("opacity", 0);
                            })

工具提示CSS：

div.tooltip {   
    position: absolute;         
    text-align: center;         
    width: 80px;                    
    height: 100px;                  
    padding: 2px;               
    font: 12px sans-serif;      
    background: lightsteelblue; 
    border: 0px;        
    border-radius: 8px;         
    pointer-events: none;   
    color: white;       
}

小提琴：https://jsfiddle.net/zynLryyL/