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>