title: Tooltip not generating when hovering a pie chart
body: <p>I am trying to build a pie chart using the d3. I learned the concept from the site <a href="http://zeroviscosity.com/d3-js-step-by-step/step-1-a-basic-pie-chart" rel="nofollow noreferrer">click here</a> but when i hover over a part of pie chart the tooltip is not showing 
  here's my css style code used</p>
  
  <pre><code>#chart {
      height: 360px;
      margin: 0 auto;                                               /* NEW */
      position: relative;
      width: 360px;
    }
    .tooltip {
      background: #eee;
      box-shadow: 0 0 5px #999999;
      color: #333;
      display: none;
      font-size: 12px;
      left: 130px;
      padding: 10px;
      position: absolute;
      text-align: center;
      top: 95px;
      width: 80px;
      z-index: 4;
    }
    .legend {
      font-size: 12px;
    }
    rect {
      cursor: pointer;                                              /* NEW */
      stroke-width: 2;
    }
    rect.disabled {                                                 /* NEW */
      fill: transparent !important;                                 /* NEW */
    }    
  </code></pre>
  
  <p>and here's the code for the js part</p>
  
  <pre><code>$rootScope.renderPieChart = function(dataset,dom_element_to_append_to){
  
  
          var width = $(dom_element_to_append_to).width(),
          height = 500,
          radius = Math.min(width, height) / 2;
          var donutWidth = 75;
          var legendRectSize = 18;                                  
          var legendSpacing = 4;
  
  
          var color = d3.scale.ordinal()
          .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
  
          var svg = d3.select(dom_element_to_append_to)
          .append("svg")
          .attr("width", width)
          .attr("height", height)
          .append("g")
          .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  
          var arc = d3.svg.arc()
          .outerRadius(radius - 10)
          .innerRadius(radius - donutWidth);
  
          var pie = d3.layout.pie()
          .sort(null)
          .value(function(d) { return d.value; });
  
         var tooltip = d3.select(dom_element_to_append_to)
         .append('div')
         .attr('class', 'tooltip');
         console.log(tooltip);
         tooltip.append('div')
         .attr('class', 'label');
  
         tooltip.append('div')
         .attr('class', 'count');
  
         tooltip.append('div')
         .attr('class', 'percent');
  
         var path = svg.selectAll('path')
         .data(pie(dataset))
         .enter()
         .append('path')
         .attr('d', arc)
         .attr('fill', function(d, i) {
            return color(d.data.label + " " + d.data.value);
        });
  
  
         path.on('mouseover', function(d) {                            // NEW
          var total = d3.sum(dataset.map(function(d) {                // NEW
            return d.value;                                           // NEW
          }));             
          console.log("mouseover");                                           // NEW
          var percent = Math.round(1000 * d.data.value / total) / 10; // NEW
          tooltip.select('.label').html(d.data.label);                // NEW
          tooltip.select('.count').html(d.data.value);                // NEW
          tooltip.select('.percent').html(percent + '%');             // NEW
          tooltip.style('display', 'block');                          // NEW
        });   
  
          path.on('mouseout', function() {
          console.log("mouseout");                              // NEW
          tooltip.style('display', 'none');                           // NEW
        });  
  
         var legend = svg.selectAll('.legend')                    
         .data(color.domain())                                  
         .enter()                                              
         .append('g')                                           
         .attr('class', 'legend')                              
         .attr('transform', function(d, i) {                    
            var height = legendRectSize + legendSpacing;        
            var offset =  height * color.domain().length / 2;    
            var horz = -2 * legendRectSize;                     
            var vert = i * height - offset;                     
            return 'translate(' + horz + ',' + vert + ')';       
        });                                                    
  
         legend.append('rect')                                    
         .attr('width', legendRectSize)                         
         .attr('height', legendRectSize)                        
         .style('fill', color)                                  
         .style('stroke', color);                                
  
         legend.append('text')                                     
         .attr('x', legendRectSize + legendSpacing)              
         .attr('y', legendRectSize - legendSpacing)              
         .text(function(d) { return d; })
     };
  </code></pre>
  
  <p>it is a function which takes the dataset and the dom element to which the whole pie chart is going to append 
  and here's a sample dataset</p>
  
  <pre><code>var dataset = [
        { label: 'Abulia', value: 10 },
        { label: 'Betelgeuse', value: 20 },
        { label: 'Cantaloupe', value: 30 },
        { label: 'Dijkstra', value: 40 }
      ];
  </code></pre>
  
  <p>instead of display: none, display: block thing in css i have also tried to opacity: 1, opacity: 0 thing but still no result.
  Thanks in advance</p>