D3 tooltip

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script>
<body>


</body>

CSS

svg {
  background:#A9C0E9;
}

.line{
  stroke:black;
  fill:none;
  stroke-width:3;
}
circle {
  fill:red;
}
.tooltip {
  display:none;
  position:absolute;
  background:white;
}
.tooltip.show{
  display:block;
}

JavaScript

var data=[4,9,15,23,12,15,2,18];

var width = 500,
  height = 500;

var svg = d3.select('body').append('svg').attr('height',height).attr('width',width);
var tooltip = d3.select('body').append('div').attr('class','tooltip show');
function tipUpdate(d,i){
  tooltip.classed('show',true).html(d+" "+i);
};

svg.on('mousemove', function(d,i){
  var mouse = d3.mouse(svg.node()).map(function(d) { return parseInt(d); });
  tooltip.attr('style', "left:"+(mouse[0]+10)+"px;top:"+(mouse[1]-10)+"px");
});


var x = d3.scale.linear().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

    x.domain(d3.extent(data, function(d,i) { return i; }));
    y.domain([0, d3.max(data, function(d) { return d; })]);


var line = d3.svg.line()
    .x(function(d,i) { return x(i); })
    .y(function(d,i) { return y(d); });

    svg.selectAll("path")
    		.data(data)
        .enter()
        .append('path')
        .attr("class", "line")
        .attr("d", line(data));

        
 svg.selectAll('circle')
    .data(data)
    .enter()
    .append('circle')
    .attr('cx', function(d,i){return x(i);})
    .attr('cy', function(d) { return y(d);})
    .attr('r', 5)
    .on('mouseover', tipUpdate)
    .on('mouseout', function(){ tooltip.classed('show',false); });