Skip to content

Instantly share code, notes, and snippets.

@vpascual

vpascual/gist:2731584

Created May 19, 2012 17:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vpascual/2731584 to your computer and use it in GitHub Desktop.
Save vpascual/2731584 to your computer and use it in GitHub Desktop.
Download ZIP
Simple example of a D3 tooltip
Raw
gistfile1.html
<html>
<head>
<title>D3 tooltip</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script>
</head>
<body>
<script type="application/javascript">
var w = 960,
h = 500;
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.style("background-color", "#ffffff");
var vis = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);
vis.append("svg:circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50)
.on("mouseover", function(){
d3.select(this).style("fill", "lightgreen");
tooltip.text("This is my tooltip");
tooltip.style("visibility", "visible");
})
.on("mouseout", function(){
d3.select(this).style("fill", "white");
tooltip.style("visibility", "hidden");
})
.on("mousemove", function(){ tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment