带有动态内容的jQuery UI工具提示

我使用jQuery UI Tooltip Widget并且有代码:

$(function() {$( document ).tooltip({ content: 'connecting', content:function(callback) { $.get('teacher.php?teacherid=' + link,{}, function(data) { callback(data); }); }, })}); 

在我的页面上我有:

 
Alex Brown
John Black

但它不起作用。 如何向JS发送变量,Alex Brown是ID = 1的老师,John Black是ID = 2的老师?

UPD:嗯,这是固定的

   $(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); }); }, })});  

在HTML中我现在有:

 Alex Brown John Black Homer Simpson 

首先,您使用课程标记链接

   

然后在该类上挂钩工具提示

 $(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); }); }, })}); 

在非html5页面上,您可以使用标题之类的其他属性:

  var link = $(this).attr("title"); // here retrieve the id of the teacher 

我认为最好使用HTML5自定义属性

 
Alex Brown
John Black

和脚本

 $(function() { $( ".teacher" ).tooltip({ content: function() { return $(this).attr('data-id'); }, }); }); 

您可以在以下url玩这个: http : //jsfiddle.net/pT3ed/4/

只需替换“return $(this).attr(’data-id’);” 使用$(this).attr(’data-id’)作为id的加载器。

你应该得到这个:

 $('body').tooltip({ selector: '[data-toggle=tooltip]' }); 
      dynamic jquery ui tooltip        
link-1
link-2