Tooltip Study

In response to http://stackoverflow.com/questions/21153074/d3-positioning-tooltip-on-svg-element-not-working

by Nivaldo

HTML

<div class="block">This div just takes up space.</div>
<svg>
    <g transform="rotate(10) translate(20,-5)">
        <circle r="25" cx="50" cy="50"/>
        <circle r="25" cx="200" cy="50"/>
        <circle r="25" cx="350" cy="50"/>
        <circle r="25" cx="50" cy="200"/>
        <circle r="25" cx="200" cy="200"/>
        <circle r="25" cx="350" cy="200"/>
        
    </g>
</svg>
<div class="tooltip">Tipsy!</div>

CSS

div.tooltip {
    visibility:hidden;
    background: lightblue;
    border:solid gray;
    position: absolute;
}
div.block {
    height: 100px;
    background:lightyellow;
}
svg {
    margin:20px;
    width:400px;
    height:300px;
    border: solid 1px gray;
}

JavaScript

var tooltip = d3.select("div.tooltip");

d3.select("body")
    .select("svg")
    .select("g")
    .selectAll("circle")
    .on("mouseover", function () {
        return tooltip.style("visibility", "visible");
        })
    .on("mousemove", function () {
        //console.log(d3.event);
        return tooltip
            .style("top", (d3.event.pageY + 16) + "px")
            .style("left", (d3.event.pageX + 16) + "px");
    })
    .on("mouseout", function () {
    return tooltip.style("visibility", "hidden");
});