title: Highcharts custom tooltip
body: <p>I have a Pie Chart that I want to add custom descriptions to the <code>tooltip</code> section based on what the name of the data item is. However my <a href="http://jsfiddle.net/ng1kvmxh/14/" rel="nofollow">fiddle</a> doesn't seem to operate correctly.</p>
  
  <p>Is this the correct approach to add custom tooltips in Highcharts?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
        var dataPie =[];
      var abc =[{"name":"Dual","load":"20"},{"name":"Gas","load":"35"},{"name":"Other_Fossil_Fuels","load":"15"},{"name":"Nuclear","load":"12"},{"name":"Hydro","load":"8"},{"name":"Wind","load":"10"},{"name":"Other_Renewables","load":"10"}];
   $.each(abc,function(i,el)
  {
       dataPie.push({name :el.name,y: parseInt(el.load)});
     
  });
      $('#container').highcharts({
          chart: {
              plotBackgroundColor: null,
              plotBorderWidth: null,
              plotShadow: false,
              type: 'pie'
          },
          title: {
              text: 'Browser market shares January, 2015 to May, 2015'
          },
          tooltip: {
              useHTML: true,
               formatter: function() { 
                   $.each(dataPie, function(i, e){
                    if(e.name == "Hydro"){
                     return 'Hydro descript';
                    }else if (e.name == "Wind"){
                       return 'Wind descript';
                      }else if (e.name == "Other_Renewables"){
                       return 'OR descript';
                      }else if (e.name == "Dual"){
                       return 'Dual descript';
                      }else if (e.name == "Gas"){
                       return 'Gas descript';
                      }else if (e.name == "Other_Fossil_Fuels"){
                       return 'FF descript';
                      }else if (e.name == "Nuclear"){
                       return 'Nuclear descript';
                      }
                    return 'Other';
                   });
               }
          },
          plotOptions: {
              pie: {
                  allowPointSelect: true,
                  cursor: 'pointer',
                  dataLabels: {
                      enabled: true,
                      format: '&lt;b&gt;{point.name}&lt;/b&gt;: {point.percentage:.1f} %',
                      style: {
                          color: (Highcharts.theme &amp;&amp; Highcharts.theme.contrastTextColor) || 'black'
                      }
                  }
              }
          },
          series: [{
              name: "Brands",
              colorByPoint: true,
              data: dataPie
          }]
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>