Demo of dynamically showing record details as tooltip

ID	Name
1	John Deo
2	Max Ruin
3	Arnold
4	Krish Star
5	John Mike
6	Alex John
7	My John Rob
8	Asruid
9	Tes Qry
10	Big John

Place the mouse over the student name.

How the script works

There are 10 records with student id and name, displayed by taking data from a database table.
Each record has one unique id which is passed to backed end script by using get method.
We get the details of the student by using its id and display it as tooltip.
The same details (script) are also show by using click event of a button here.

Download the backend script and tutorial from here.

<script>
$(document).ready(function() {
//////////////
$(function() {$( ".b_dtl" ).tooltip({ 
items: "td", 
content:'connecting',
content:function(callback) {
 var str = $(this).attr("value");//retrive the value or id of the student
 $.get('load-display-dtl.php?str=' + str,{}, function(data) {
  callback(data);
 });
}
})
})
///////////
})
</script>