I use jQuery UI Tooltip Widget and there is code:
$(function() {$( document ).tooltip({
content: 'connecting',
content:function(callback) {
$.get('teacher.php?teacherid=' + link,{}, function(data) {
callback(data);
});
},
})});
On my page i have:
<div title="" onmouseover="{link=1}">Alex Brown</div>
<div title="" onmouseover="{link=2}">John Black</div>
But it doesn't work. How can i send variable to JS that Alex Brown is teacher with ID=1, and John Black is teacher with ID=2?
UPD: Well, it was fixed
<script>
$(function() {$( document ).tooltip({
show: 0,
hide: 0,
items: 'teacher',
content: 'connecting',
content: function(callback) {
var x=$(this).attr('id')
$.get('teacher.php?teacherid='+x,{}, function(data) {
callback(data);
});
},
})});
</script>
And in HTML i now have:
<teacher id="1">Alex Brown</teacher>
<teacher id="2">John Black</teacher>
<teacher id="3">Homer Simpson</teacher>
First you tag your links with a class
<div class="teacher-link" data-teacher="1" title="1" onmouseover="{link=1}">Alex Brown</div>
<div class="teacher-link" data-teacher="2" title="2" onmouseover="{link=2}">John Black</div>
Then hook your tooltips on that class
$(function() {$( ".teacher-link" ).tooltip({
content: 'connecting',
content:function(callback) {
var link = $(this).attr("data-teacher"); // here retrieve the id of the teacher
$.get('teacher.php?teacherid=' + link,{}, function(data) {
callback(data);
});
},
})});
On non html5 page you can use another attribute like title:
var link = $(this).attr("title"); // here retrieve the id of the teacher