Skip to content

Instantly share code, notes, and snippets.

@katsumitakano

katsumitakano/index.html

Created January 27, 2014 11:55
Show Gist options
  • Save katsumitakano/8647349 to your computer and use it in GitHub Desktop.
Save katsumitakano/8647349 to your computer and use it in GitHub Desktop.
Download ZIP
cssTooltip
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tooltipのテスト</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
span#tooltip{
position: absolute;
z-index: 10;
visibility: hidden;
padding: 0 5px;
border: 1px solid #000;
border-radius: 3px;
background-color: #333;
color: #fff;
font-size: 11px;
opacity: 0.8;
}
</style>
</head>
<body>
<span id="tooltip"></span>
<script>
var dataset = [100, 150, 200];
var tooltip = d3.select("body").select("#tooltip")
var svg = d3.select("body").append("svg")
.attr("width", 300)
.attr("height", 300);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
x: 0,
y: function(d,i){ return i*30; },
width: function(d){ return d; },
height: 20,
fill: "green",
})
.on("mouseover", function(d){return tooltip.style("visibility", "visible").text(d);})
.on("mousemove", function(d){return tooltip.style("top", (event.pageY-20)+"px").style("left",(event.pageX+10)+"px");})
.on("mouseout", function(d){return tooltip.style("visibility", "hidden");})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment