|<- [[Using transitions and animations]]|[[Grouping, sorting, and adding axes]] ->|

===== adding a tooltip ====

<code>var bardata = [];

for (var i = 0; i < 50; i++) {
  bardata.push(Math.round(Math.random() * 30));
}

var height = 400;
var width = 600;
var barWidth = 50;
var barOffset = 5;

// linear scale
var yScale = d3.scale.linear()
  .domain([0, d3.max(bardata)])
  .range([0, height]);

// ordinal scale
var xScale = d3.scale.ordinal()
  .domain(d3.range(0, bardata.length))
  .rangeBands([0, width]);

var tooltip = d3.select('body').append('div')
  .style('position', 'absolute')
  .style('padding', ' 0 10px')
	.style('background', 'white')
	.style('opacity', 0);

var colors = d3.scale.linear()

  //.domain([0, d3.max(bardata)])
	//.domain([0, bardata.length])
	.domain([0, bardata.length * .33, bardata.length * .66, bardata.length])

	//.range(['#FFB832', '#C61C6F']);
	.range(['#B58929', '#C61C6F', '#268BD2', '#85992C']);

var mychart = d3.select('#chart').append('svg')
.attr('width', width)
.attr('height', height)
.style('background', '#C9D7D6')
.selectAll('rect').data(bardata)
.enter().append('rect')

  //.style('fill', colors)
  .style('fill', function (d, i) {
    return colors(i);
  })
  .attr('width', xScale.rangeBand())
  .attr('height', 0)
  .attr('x', function (d, i) {
    return xScale(i);
  })
  .attr('y', height)
  .on('mouseover', function (d) {

    tooltip.transition()
      .style('opacity', .9);

    tooltip.html(d)
		  .style('left', (d3.event.pageX) + 'px')
		  .style('top', (d3.event.pageY) + 'px');

    d3.select(this)
		.transition()
    .style('opacity', .5)
    .style('fill', 'cyan');
  })
  .on('mouseout', function (d) {
    d3.select(this)
		.transition().delay(500).duration(800)
    .style('opacity', 1)
	  //.style('fill', tempColor);
  });

mychart.transition()
  .attr('height', function (d) {
    return yScale(d);
  })
  .attr('y', function (d) {
    return height - yScale(d);
  })
	.delay(function (d, i) {
    return i * 8;
	})
	.ease('elastic');</code>