KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
I'm using D3 to draw a scatter graph. I would like to show tooltips when the user mouses over each circle. My problem is that I can append tooltips, but they're positioned using the mouse event d3.event.pageX and d3.event.pageY , so they are not positioned consistently over each circle. Instead, some are slightly to the left of the circle, some to the right - it depends on how the user's mouse enters the circle. This is my code: circles .on("mouseover", function(d) { tooltip.html(d) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { tooltip.transition().duration(500).style("opacity", 0); }); And is a JSFiddle showing the problem: http://jsfiddle.net/WLYUY/5/ Is there some way I can use the centre of the circle itself as the position to orient the tooltip, not the mouse position?
Tags (comma-separated)
Save Edits
Cancel