how to show tooltip with jquery and css

Some time in your project you want to show your long text cut from end (data in tables)and show three dots or ellipsis at the end and the full text as a tool-tip in this demo have added JQuery UI CSS link to apply style for tool-tip.If you see demo you will find that some cell are white it means if you have text less than 5 character ellipsis will not applied you can change the length according to your requirement.
Demo HTML

<table border="1" class="responsive">
<tbody>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Austria</td>
<td>2010/09/20</td>
<td>$75,6060</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>Willington</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Dev</td>
<td>San Francisco</td>
<td>2009/01/12</td>
<td>$86,004670</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>Berlin</td>
<td>2009/07/07</td>
<td>$87,507099</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>2008/12/19</td>
<td>$90,546560</td>
</tr>
<tr>
<td>Joe</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>2010/12/22</td>
<td>$92,574345</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>2013/08/11</td>
<td>$9843</td>
</tr>
</tbody>
</table>

CSS

table {
  border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Script

 $(function() {
$('table.responsive tr td').each(function() {
var $this = $(this);
    var cellText = $this.text();
	if(cellText.length > 5){
		$this.attr('title',cellText).css('background-color','orange');
		var newText = cellText.substring(0, 5);
		$this.text(newText + "...");
	}
    
});

    $( document ).tooltip();
  });

demo link