Tootip is not working on bar graph with d3.js

Question

I am using d3.js integrating with angularJs. But it is not working and got an error when calling tip.show and tip.hide.

var chart = d3.select(element[0])
     .append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
     .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

chart.call(tip);

chart.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; })    
    .attr("x", function(d) { return x(d.name); })
    .attr("y", height)
    .attr("height", 0)
    .transition().duration(2000)
    .attr("y", function(d) {return y(Math.max(0, d.value)); })
    .attr("height", function(d) {return Math.abs(y(d.value) - y(0)); })    
    .attr("width", x.rangeBand())
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide); 

The complete working example is given in fiddle

http://jsfiddle.net/HB7LU/8984/

Answer 1

You are binding the mouse listeners on each transition. Bind the listeners to the selection

 chart.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; })    
      .attr("x", function(d) { return x(d.name); })
      .attr("y", height)
      .attr("height", 0)
      .on('mouseover', tipX.show) //Moved up
      .on('mouseout', tipX.hide)  //Moved up
      .transition().duration(2000)
      .attr("y", function(d) {return y(Math.max(0, d.value)); })
      .attr("height", function(d) {return Math.abs(y(d.value) - y(0)); })    
      .attr("width", x.rangeBand());

Also update this code, since d is an object here.

 var tip = d3.tip()
       .attr('class', 'd3-tip')
       .offset([-10, 0])
       .html(function(d) {
            //Changed d to d.value
            return "<strong>Frequency:</strong> <span style='color:red'>" + d.value + "</span>";
       });

Here is the updated fiddle

Answer 2

I think you can draw a div to do the trick. I'm not sure if it is a good way.

var div = d3.select('body').append('div')   
.attr('class', 'tooltip')               
.style('opacity', 0);

fiddle