<!DOCTYPE html>
<html>
<head>
<title>d3.tip.js - Tooltips for D3</title>
<meta charset="utf-8" />
<title>Example styles</title>
<script type="text/javascript" src="../bower_components/d3/d3.js"></script>
<script type="text/javascript" src="../index.js"></script>
<style type="text/css">
body {
padding: 40px;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
width: 600px;
}
svg.n, svg.s {
margin-left: 200px;
margin-right: 200px;
}
svg.e {
margin-left: 200px;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
position: absolute;
}
/* Nrthward tooltips */
.d3-tip.n:after {
content: "\25BC";
margin: -1px 0 0 0;
top: 100%;
left: 0;
text-align: center;
}
/* Eastward tooltips */
.d3-tip.e:after {
content: "\25C0";
margin: -4px 0 0 0;
top: 50%;
left: -8px;
}
/* Southward tooltips */
.d3-tip.s:after {
content: "\25B2";
margin: 0 0 1px 0;
top: -8px;
left: 0;
text-align: center;
}
/* Westward tooltips */
.d3-tip.w:after {
content: "\25B6";
margin: -4px 0 0 -1px;
top: 50%;
left: 100%;
}
circle {
fill: #ccc;
fill-opacity: 0.6;
stroke: #bbb;
stroke-width: 1px;
}
circle:hover {
fill: #bbb;
stroke: #999;
}
text {
text-anchor: middle;
}
</style>
</head>
<body>
<script type="text/javascript">
var data = [],
random = d3.random.normal(5),
random2 = d3.random.irwinHall(1)
for(var i = 0; i < 25; i++) data.push(random(i))
var w = 200,
h = 200,
b = 20,
r = 10,
x = d3.scale.linear().domain([0, data.length - 1]).range([r, w - r]),
y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0])
var directions = ['n', 'w', 'e', 's'];
directions.forEach(function (direction) {
var tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) { return d.toFixed(2) })
.direction(direction)
.offset(function () {
if(direction=='n') { return [-10,0] }
else if(direction=='s') { return [10,0] }
else if(direction=='e') { return [0,10] }
else if(direction=='w') { return [0,-10] }
})
var vis = d3.select(document.body)
.append('svg')
.attr('class', direction)
.attr('width', w)
.attr('height', h)
.append('g')
.attr('transform', 'translate('+b+','+b+')')
.call(tip)
vis.append('text')
.attr('class', 'direction')
.attr('x', w/2)
.attr('y', -b)
.attr('dy', '1em')
.text('direction: ' + direction)
vis.selectAll('circle')
.data(data)
.enter().append('circle')
.attr('r', function(d, i) { return random2(i) * 10 })
.attr('cx', function(d, i) { return x(i) })
.attr('cy', y)
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
})
</script>
</body>
</html>