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

我使用jQuery UI Tooltip Widget,有代码:

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

  })});

在我的页面上,我有:

<div title="" onm ouseover="{link=1}">Alex Brown</div>
<div title="" onm ouseover="{link=2}">John Black</div>

但这是行不通的.我如何将变量发送给JS,即Alex Brown是ID = 1的老师,而John Black是ID = 2的老师?

UPD:
好吧,它是固定的

  <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> 

在HTML中,我现在有:

<teacher id="1">Alex Brown</teacher>
<teacher id="2">John Black</teacher>
<teacher id="3">Homer Simpson</teacher>

解决方法:

首先,您使用类标记链接

<div class="teacher-link" data-teacher="1" title="1" onm ouseover="{link=1}">Alex Brown</div>
<div class="teacher-link" data-teacher="2" title="2" onm ouseover="{link=2}">John Black</div>

然后将您的工具提示与该课程挂钩

$(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页面上,您可以使用另一个属性,例如title:

   var link = $(this).attr("title"); // here retrieve the id of the teacher 
上一篇:MenuItem上的Android工具提示


下一篇:javascript – d3.js路径上的工具提示