带有动态内容的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
首先,您使用课程标记链接
Alex Brown John Black
然后在该类上挂钩工具提示
$(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