Question

When I use tipsy on my d3 force directed graph I have a problem: when I set the tipsy gravity to west, the tipsy begins at the upper left corner of my circle. How can I make it begin on the right side of my circle?

Here is the sample of the code I use in d3:

var node = vis.selectAll("g.node")
    .data(json.nodes)
    .enter().append("svg:g");

node.append("svg:circle")
    .attr("r", function(d){return d.credits *5+"px";})
    .style("fill", "orange");

$('svg circle').tipsy({
    gravity: 'w',
    html: true,
    title: function() {
        var d = this.__data__,
            name = d.name;
        return name;
    }
});

Edit In this question: https://stackoverflow.com/a/10806220/1041692 they say the following:

You could try adding the tooltip to an svg:g that you overlay with the
actual circle, but give zero width and height. Currently it’s taking
the bounding box and putting the tooltip at the edge. Playing around
with tipsy’s options might help as well.

But either I do it wrong or it doesn’t work, it didn’t solve my problem.

EDIT 2 This problem also depends on the browser, in chrome the tipsy element is attached on the top left corner of the circle whereas I would like it to be attached on the middle of the right side of the circle. In Firefox, the tipsy appears on the top left of the whole webpage.

Answer 1

The D3 tipsy tutorial actually uses a modified version of tipsy:

http://bl.ocks.org/1373263

It is slightly tweaked to correctly calculate bounding boxes of SVG elements. So copy that source code, rather than using tipsy downloaded from the tipsy site.