title: Unique DataTable column header tooltips
body: <p>I got this code from <a href="https://stackoverflow.com/questions/32318129/how-to-add-tooltip-to-table-header">another question</a>, but my question is how could this code be modified so that each column header can have a custom, unique tooltip? For example, user hovers over Salary and tooltip displays "some text", and when you hover over Start Date, it displays "some different text" ? I assume I would have to change the <code>.each()</code> function to something else, but I'm not too well versed in JavaScript to know how to approach this. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {  
      var table = $('#example').DataTable( {     
          "ajax": 'https://api.myjson.com/bins/qgcu',
          "initComplete": function(settings){
              $('#example thead th').each(function () {
                 var $td = $(this);
                 $td.attr('title', $td.text());
              });
  
              /* Apply the tooltips */
              $('#example thead th[title]').tooltip(
              {
                 "container": 'body'
              });          
          }  
      }); 
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt; 
  
  &lt;table id="example" class="display"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Position&lt;/th&gt;
          &lt;th&gt;Office&lt;/th&gt;
          &lt;th&gt;Salary&lt;/th&gt;
          &lt;th&gt;Start Date&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  
  &lt;tfoot&gt;
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Position&lt;/th&gt;
          &lt;th&gt;Office&lt;/th&gt;
          &lt;th&gt;Salary&lt;/th&gt;
          &lt;th&gt;Start Date&lt;/th&gt;      
      &lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>