tooltip in table

HTML

<table>
  <caption title="Caption">Characteristics with positive and negative sides</caption>
  <thead>
    <tr>
      <th>Field ID</th>
      <th>Field Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td><input type="text" data-title="Insert ID" /></td>
        <td><input type="text" data-title="Insert Name" /></td>
    </tr>
    <tr>
      <td><input type="text" data-title="Insert<b> ID</b>" /></td>
      <td><input type="text" data-title="Insert Name" /></td>
    </tr>
  </tbody>
</table>

CSS

table{width: 300px;}
td, th {
    border-width: 1px;
    border-style: solid;
}

JavaScript

$(document).tooltip({
    items:"[title],[data-title]",
    content: function () { 
        var element = $(this);
        if ( element.is( "[data-title]" ) ) {
            return element.data("title");
            }
        if ( element.is( "[title]" ) ) {
           return element.attr( "title" );
            }
        }
});