带有动态内容的jQuery UI工具提示 [英] jQuery UI Tooltip with dynamic content

问题描述

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

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

  })});

在我的页面上我有：

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

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

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：
嗯，它被修复了

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> 

在HTML中我现在有：

And in HTML i now have:

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

  })});

在非html5页面上，您可以使用其他属性，例如title：

On non html5 page you can use another attribute like title:

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

这篇关于带有动态内容的jQuery UI工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！