I am encountering an issue with displaying tooltips in D3 when combined with CSS overflow. Is there a solution available for this particular problem?
CSS code:
#chart1 {
overflow-x: auto;
overflow-y: hidden;
max-width: 800px;
max-height: 225px;
position: absolute;
left: 140px;
top: 10px;
}
D3 code:
.on("mouseover", function(d) {
tooltip.transition()
.duration(400)
.style("opacity", 0);
tooltip.transition()
.duration(100)
.style("visibility", "visible")
.style("opacity", .8);
tooltip.html(d.visitCountry + "<br/> " + tooltipDate(d.startDate) + " - " + tooltipDate(d.endDate) + "<br/> " + d.visitPurpose)
.style("left", (d3.event.pageX - 15) + 'px') // possible issue here?
.style("top", (d3.event.pageY - 10) + 'px'); // possible issue here?
})
.on("mousemove", function(d) {
return tooltip.style("top", (d3.event.pageY - 10)+"px").style("left",(d3.event.pageX - 110)+"px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(0)
.style("visibility", "hidden");
});
When the page hasn't been scrolled, the tooltip functions correctly. However, the positioning of the tooltip is affected otherwise.
Fiddle: http://jsfiddle.net/00fhtuyg/1/