using Tooltip to show a Row details of a Table (jQuery)

Question

I am able to show the dynamic values in a jsp page in Table format.And I want to implement the mouseover/hover function (in jQuery) to show the each Row details in my Table(in jsp page).I am sharing some of code here :

<table name="table" id="table" class="table" cellpadding="4" cellspacing="2" border="1" bgcolor="" >
<tr>
<th><input type="checkbox" name="allCheck" onclick="selectallMe()"></th>
<th>Emp ID</th>
<th>Emp Name</th>
</tr>
<tr class="tr" id="tr">
<%while(rs.next()){ %>
<td><input type="checkbox" name="chkName" onclick="selectall()"></td> 
<td><input type="text"  name="empId" value="<%= rs.getString(1)%>" disabled="disabled"  maxlength="10"></td>
<td><input type="text"  name="empName" value="<%= rs.getString(2)%>" disabled="disabled" maxlength="10"></td>
</tr>
<% } %>
</table>

For this,will I have to use jQuery DataTable and mouseover()/hover or something else.

What should be the right way?

Answer 1

Take a look at the following link which will explain more about mouse hover,

http://jqfaq.com/how-to-highlight-rows-in-a-table-on-mouse-hover/

You, can easily get the details of the row in _mousehover which is used in the above link. and you can show it. Do you want to show it in tooltip?

Edit: Here is the way to using tr info in tooltip on mousehover,

// Do this in _mousehover
$currentRow = $(event.target).closest('tr');
$currentRow.attr("title", $currentRow.attr("id"));

Note: In that sample doesn't have id for tr. So, you have to add it.