D3 binding data to SVG tooltip - d3.js

Question

Id like to use this tooltip from this answer however I can't figure out how to bind data to it.
In this example I'd like to have two circles, that on hover show their size value as text.
watch.csv
circle,size
green,5
yellow,10
code
d3.csv("watch.csv", function(error, watch) {
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text(function(d) { return d.size; }) //TRYING THIS
var sampleSVG = d3.select(".example_div")
.append("svg:svg")
.attr("class", "sample")
.attr("width", 300)
.attr("height", 300);
d3.select(".example_div svg")
.data(watch) //AND THIS
.enter()
.append("svg:circle")
.attr("stroke", "black")
.attr("fill", "aliceblue")
.attr("r", 30)
.attr("cx", 52)
.attr("cy", 52)
.on("mouseover", function() {
return tooltip.style("visibility", "visible");
})
.on("mousemove", function() {
return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
})
.on("mouseout", function() {
return tooltip.style("visibility", "hidden");
});
});
Plunker

Answer 1

Change your tooltip var for this:
var tooltip = d3.select("body")
.append("div")
.attr("class", "someTooltip")
.style("opacity", 0);
Style your tooltip in the CSS, using the selector .someTooltip.
And change all your "mouseove", "mousemove" and "mouseout" for this:
.on("mousemove", function(d) {
tooltip.html("The size is: " + d.size)
.style("top", (d3.event.pageY - 10) + "px")
.style("left", (d3.event.pageX + 10) + "px")
.style("opacity", 1);
}).on("mouseout", function(){
tooltip.style("opacity", 0);
});

Answer 2

First you need to add jquery and tipsy which is a jquery plugin.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.3/jquery.tipsy.js"></script>
tipsy css
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.3/jquery.tipsy.css" rel="stylesheet" type="text/css" />
Next you need to bind the data to the tipsy jquery way like this.
$('svg circle').tipsy({ //select all circles
gravity: 'w',
html: true,
title: function() {
var d = this.__data__;//get the data from the dom
return 'Hi there! My color is <span style="color:' + d.circle + '">' + d.size + '</span>'; //make the tipsy tool tip using the data
}
});
Remove all the tooltip code like this as that is not needed:
.on("mouseover", function() {
return tooltip.style("visibility", "visible");
})
.on("mousemove", function() {
return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
})
.on("mouseout", function() {
return tooltip.style("visibility", "hidden");
});
Remove this
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text(function(d) { return d.size; }) //TRYING THIS
So your code will look like this here