title: How to make a columns contents display in a tool-tip when hovering over? HTML5
body: <p>I'm using a HTML table to display my content on my webpage. I'm having trouble on figuring out how to make a columns contents display when it is hovered over. For example if I hovered over a cell on the table (which has the tool-tip enabled), the contents of that cell should appear in a tool-tip. </p>
  
  <p>I am currently using JavaScript &amp; J Query to build the table, I have included static data to display in the table:</p>
  
  <pre><code>var AuditLog = [
      { UserID: "DJoe1", Action: "loggedIn", Date: "17 July 2014 11:02", AppID:"MyRoster", DeviceID: "-", Notes: "None" },
      { UserID: "DJoe2", Action: "loggedIn", Date: "17 July 2014 10:49", AppID: "Train Dispatch", DeviceID: "-", Notes: "None" },
      { UserID: "DJoe3", Action: "loggedIn", Date: "17 July 2014 10:29", AppID: "MyRoster", DeviceID: "-", Notes: "None" },
      { UserID: "LJenkins2", Action: "loggedIn", Date: "17 July 2014 10:15", AppID: "Train Dispatch", DeviceID: "-", Notes: "None" },
      { UserID: "LJenkins1", Action: "loggedIn", Date: "17 July 2014 10:11", AppID: "Train Dispatch", DeviceID: "-", Notes: "None" }
      ];
  </code></pre>
  
  <p>The column which needs the tool-tip is the Notes column. Table Structure:</p>
  
  <pre><code>                 var AuditHTML = "&lt;table class='tablesorter full_width_table info_table_style ui-body-d ui-shadow table-stripe ui-responsive' id='auditTable'&gt;" +
                      "&lt;thead &gt;" +
                         "&lt;tr class='ui-bar-b schedule_row '&gt;" +
                           "&lt;th&gt;User ID&lt;/th&gt;" +
                           "&lt;th&gt;Action&lt;/th&gt;" +
                           "&lt;th&gt;Date&lt;/th&gt;" +
                           "&lt;th&gt;App ID&lt;/th&gt;" +
                           "&lt;th&gt;Device ID&lt;/th&gt;" +
                           "&lt;th&gt;Notes&lt;/th&gt;" +
                         "&lt;/tr&gt;" +
                       "&lt;/thead&gt;" +
                       "&lt;tbody&gt;";
  
      for (s = 0; s &lt; AuditLog.length; s++) {
  
          AuditHTML += "&lt;tr class='schedule_row display' id='auditTr_" + s + "'&gt;" +
  
            "&lt;td&gt; " + AuditLog[s].UserID + "&lt;/td&gt;" +
                    "&lt;td&gt; " + AuditLog[s].Action + "&lt;/td&gt;" +
                    "&lt;td&gt; " + AuditLog[s].Date + "&lt;/td&gt;" +
                    "&lt;td&gt; " + AuditLog[s].AppID + "&lt;/td&gt;" +
                    "&lt;td&gt; " + AuditLog[s].DeviceID + "&lt;/td&gt;" +
                    "&lt;td&gt; " + AuditLog[s].Notes + "&lt;/td&gt;";
  
          AuditHTML += "&lt;/tr&gt;";
      }
  
      AuditHTML += "&lt;/tbody&gt;&lt;/table&gt;";
  
  $("#auditContent").html(AuditHTML);
  </code></pre>
  
  <p>I have used a div to display the table on the page:</p>
  
  <pre><code>  &lt;div id="auditContent"&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Any help would be great!</p>