Question

146

D3.js: Position tooltips using element position, not mouse position?

rated 0 times [ 150] [ 4] / answers: 1 / hits: 74447 / 11 Years ago, sat, april 27, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

braeden

Add To Favorites

Follow

Total Points: 231

Total Questions: 96

Total Answers: 86

Location: Somalia

Member since Mon, Dec 28, 2020

3 Years ago

answered 11 Years ago margaritakristinak · Accepted Answer

In your particular case you can simply use d to position the tooltip, i.e.

tooltip.html(d)  

  .style(left, d + px)     

  .style(top, d + px);

To make this a bit more general, you can select the element that is being moused over and get its coordinates to position the tooltip, i.e.

tooltip.html(d)  

  .style(left, d3.select(this).attr(cx) + px)     

  .style(top, d3.select(this).attr(cy) + px);