Skip to content

Instantly share code, notes, and snippets.

@ilyabo
Created November 4, 2011 17:51
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ilyabo/1339996 to your computer and use it in GitHub Desktop.
Save ilyabo/1339996 to your computer and use it in GitHub Desktop.
D3 tooltip using SVG title element
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var w = 800, h = 500;
var colors = d3.scale.category20();
var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h);
var data = d3.range(20).map(function() { return { x:Math.random()*w, y:Math.random()*h, r:Math.random()*30 } });
vis.selectAll("circle")
.data(data)
.enter().append("svg:circle")
.attr("stroke", "black")
.attr("fill", function(d, i) { return colors(i); })
.attr("cx", function(d, i) { return d.x; })
.attr("cy", function(d, i) { return d.y; })
.attr("r", function(d, i) { return d.r; })
// Here we add an SVG title element the contents of which is effectively rendered in a tooltip
.append("svg:title")
.text(function(d, i) { return "My color is " + colors(i); });
</script>
</body>
</html>
@ilyabo
Copy link
Author

ilyabo commented Nov 4, 2011

There is a catch though, check out this: https://gist.github.com/1016860#gistcomment-61316

@ilyabo
Copy link
Author

ilyabo commented Nov 17, 2011

@mahiryavuz
Copy link

Hi,

many thanks for the sample code, one problem that I see in this code as well as in other examples. title element exists in html code however it doesn't display when you run the webpage. Do you have any idea for the reason of that? Maybe it should be styled with css?

I believe it works when one uses svg:group. Any explanation on this would be very useful.

thanks
M.

@ilyabo
Copy link
Author

ilyabo commented Feb 20, 2012

It seems that it depends on the browser, check out this discussion. So instead of relying on the browsers' interpretation of svg:title it's better to use tooltips drawn manually, like for instance the one in the jQuery tipsy example.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment