title: Add tooltip to TD in DataTable with jQuery
body: <p>I have a datatable for which I bind the data trough JavaScript:</p>
  
  <pre><code>$("#TableUsage").DataTable({
                  data: infolist(),
                  ordering: true,
                  paginate: false,
                  "info": false,
                  columns: [
                      { data: "Product", title: "Product" },
                      { data: "Serial", title: "Serial" },
                      { data: "App", title: "App" },
                  ]});
  </code></pre>
  
  <p>The infolist looks something like:</p>
  
  <pre><code>infolist.push({Product: "01", Serial: "05", App: "M07", AppCol: "App info P01"})
  infolist.push({Product: "02", Serial: "08", App: "M03", AppCol: "App info P02"})
  infolist.push({Product: "03", Serial: "03", App: "M09", AppCol: "App info P03"})
  </code></pre>
  
  <p>Usually, in HTML I only write:</p>
  
  <pre><code>&lt;td data-bind="text: $data.App, attr: {title: $data.AppCol}"&gt;App&lt;/td&gt;
  </code></pre>
  
  <p>and the AppCol info is displayed inside a tooltip when hoovering over the App cell value.</p>
  
  <p>Is there a way to add the tooltip, but using Javascript code, because right now, in HTML the table looks like this?</p>
  
  <pre><code>&lt;table class="table" style="width: 100%;" id="TableUsage"&gt;&lt;/table&gt;
  </code></pre>
  
  <p><strong>UPDATE!</strong></p>
  
  <p><a href="http://jsfiddle.net/hg45z9rL/76/" rel="nofollow noreferrer">JSFiddle</a> attached :)</p>