title: Issue with adding tooltip in D3 pie chart
body: <p>I am using <a href="http://d3js.org/" rel="nofollow">D3.js</a> to build Pie chart. I am following <a href="http://d3pie.org/#generator-start-pie1" rel="nofollow">this</a> tutorial to build Pie chart in D3. Now I want to add tooltip in each of segment of pie chart. </p>
  
  <p>I am trying to use callback to perform some event. Like this ..</p>
  
  <pre><code>&lt;script&gt;
    var pie = new d3pie("pieChart", {
  "header": {
      "title": {
          "text": " ",
          "fontSize": 24,
          "font": "open sans"
      },
      "subtitle": {
          "text": " ",
          "color": "#999999",
          "fontSize": 12,
          "font": "open sans"
      },
      "titleSubtitlePadding": 9
  },
  "footer": {
      "color": "#999999",
      "fontSize": 10,
      "font": "open sans",
      "location": "bottom-left"
  },
  "size": {
      "canvasWidth": 590
  },
  "data": {
      "sortOrder": "value-desc",
      "content": [
          {
              "label": "Google",
              "value": 264131,
              "color": "#D78902"
          },
          {
              "label": "Twitter",
              "value": 118812,
              "color": "#04C3FD"
          },
          {
              "label": "Facebook",
              "value": 157618,
              "color": "#0457FD"
          },
          {
              "label": "Yahoo",
              "value": 114384,
              "color": "#FD0404"
          }
      ]
  },
  "labels": {
      "outer": {
          "pieDistance": 32
      },
      "inner": {
          "hideWhenLessThanPercentage": 3
      },
      "mainLabel": {
          "fontSize": 11
      },
      "percentage": {
          "color": "#ffffff",
          "decimalPlaces": 0
      },
      "value": {
          "color": "#adadad",
          "fontSize": 11
      },
      "lines": {
          "enabled": true
      }
  },
  "effects": {
      "pullOutSegmentOnClick": {
          "effect": "linear",
          "speed": 400,
          "size": 8
      }
  },
  "misc": {
      "gradient": {
          "enabled": true,
          "percentage": 100
      }
  },
  callbacks: {
      onMouseoverSegment: function(info) {
          alert("hi");
      }
  }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here if you can see I have added onMouseoverSegment event in callbacks which will trigger alert on mouseover. </p>
  
  <p>Now The real thing. I want to show tooltip here with respective value on mouseover and remove that tooltip on mouseout. How can I do this ? please help.</p>
  
  <p>Check <a href="http://jsfiddle.net/ruDG6/1/" rel="nofollow"><strong>JSFIDDLE</strong></a></p>