javascript - Placing D3 tooltip in cursor location - Stack Overflow

admin管理员组

文章数量:1405350

I'm using d3-tip in my visualisation. I now want to add tooltips to elements that are very wide and may extend out of the visible canvas. By default, the tooltip is shown in the horizontal center of an object, which means in my case that the tooltip might not be in the visible area. What I need is the tooltip showing up in the horizontal position of the cursor but I don't know how to change the tooltip position correctly. I can set an offset and I can get the coordinates of the cursor, but what I can't get is the initial position of the tooltip so that I can pute the right offset. Nor can I set an absolute position:

            .on("mouseover",function(d){
                var coordinates = [0, 0];
                coordinates = d3.mouse(this);
                var x = coordinates[0];
                var y = coordinates[1];
                tip.offset([-20,20]); // this works
                tip.attr("x",40); // this doesn't
                tip.show(d);
            })

I'm using d3-tip in my visualisation. I now want to add tooltips to elements that are very wide and may extend out of the visible canvas. By default, the tooltip is shown in the horizontal center of an object, which means in my case that the tooltip might not be in the visible area. What I need is the tooltip showing up in the horizontal position of the cursor but I don't know how to change the tooltip position correctly. I can set an offset and I can get the coordinates of the cursor, but what I can't get is the initial position of the tooltip so that I can pute the right offset. Nor can I set an absolute position:

            .on("mouseover",function(d){
                var coordinates = [0, 0];
                coordinates = d3.mouse(this);
                var x = coordinates[0];
                var y = coordinates[1];
                tip.offset([-20,20]); // this works
                tip.attr("x",40); // this doesn't
                tip.show(d);
            })

• javascript
• d3.js

Share Improve this question Follow asked Sep 7, 2016 at 6:43 smcssmcs 2,00433 gold badges2626 silver badges5151 bronze badges 1

• You're right, I don't know where is my mind... just deleted the ments. – Gerardo Furtado Commented Sep 7, 2016 at 13:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you want to use offset, you can get the initial position of the tooltip after tip.show(d):

tip.style('top');
tip.style('left');

Similarly, to set the absolute position:

.on('mouseover', function(d){
        var x = d3.event.x,
            y = d3.event.y;

        tip.show(d);

        tip.style('top', y);
        tip.style('left', x);
      })

The previously stated answer did not work for me (and cannot be modified as "suggested edit queue is full.."), but with some minor adjustments, it is working fine:

.on('mouseover', function(d){
    var x = d3.event.x,
        y = d3.event.y;

    tip.show(d);

    tip.style('top', y-10 + 'px'); // edited
    tip.style('left', x+'px'); // edited
  })

本文标签： javascriptPlacing D3 tooltip in cursor locationStack Overflow