title: Tootip is not working on bar graph with d3.js
body: <p>I am using d3.js integrating with angularJs. But it is not working and got an error when calling tip.show and tip.hide. </p>
  
  <pre><code>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 &lt; 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); 
  </code></pre>
  
  <p>The complete working example is given in fiddle</p>
  
  <p><a href="http://jsfiddle.net/HB7LU/8984/" rel="nofollow">http://jsfiddle.net/HB7LU/8984/</a></p>