index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body, html{
width: 100%;
height: 100%;
margin: 0;
background-color: green;
}
body{
width: 700px;
margin: auto;
background-color: blue;
}
.tooltip {
position: absolute;
width: 120px;
height: 50px;
padding: 5px;
text-align:center;
font-size: 12px;
opacity: 0;
background-color: papayawhip;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
.region1{
width: 200px;
height: 200px;
background-color: purple;
font-size: 50px;
}
.region2{
width: 200px;
height: 200px;
background-color: orange;
font-size: 50px;
position: absolute;
}
</style>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var body = d3.select('body')
var region1 = body.append('div').attr('class', 'region1')
.text('region 1')
var region2 = body.append('div').attr('class', 'region2')
.text('region 2')
var tooltip1 = region1.append('div')
.attr("class", "tooltip")
.style("opacity", 0)
var tooltip2 = region2.append('div')
.attr("class", "tooltip")
.style("opacity", 0)
region1.on('mousemove', function(){ tooltip1.call(update_tooltip) })
region2.on('mousemove', function(){ tooltip2.call(update_tooltip) })
function update_tooltip(tooltip) {
var d = { name: 'victor', id: 'wow' }
tooltip
.transition()
.duration(100)
.style("opacity", .9);
tooltip
.text(d.name + ": " + d.id )
.style("top", (d3.event.pageY-10)+"px")
.style("left",(d3.event.pageX+10)+"px");
}
</script>
</body>
</html>