Question

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

  $(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的老师？

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>

Answer 1

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

<div class="teacher" data-id="1" title="">Alex Brown</div>
<div class="teacher" data-id="2" title="">John Black</div>

和脚本

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

您可以在http://jsfiddle.net/pT3ed/4/

播放

只需替换“return $（this）.attr（'data-id'）;”使用$（this）.attr（'data-id'）作为id。

Answer 2

首先使用类标记链接

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

然后在工作提示上挂钩

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

Answer 3

你应该得到这个：

$('body').tooltip({
    selector: '[data-toggle=tooltip]'
});

Answer 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <title> dynamic jquery ui tooltip </title>

  <link rel="stylesheet" 
  href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <style>
            #listing {
                margin-left: 50px ;
            }
            .ui-tooltip {
                background: #AAABBB ;
                -webkit-box-shadow: 0 0 10px #aaa;
                box-shadow: 0 0 10px #aaa;
            }
            body .ui-tooltip {
                border-width: 4px;
            }
    </style>
</head>
<body>
<div id="listing">
<div class="item-heading" id="item-1" > link-1 </div>
</br>
</br>
<div class="item-heading" id="item-2"> link-2</div>
</div>
    <script>

    // courtesy of: http://stackoverflow.com/a/15014759/65706
    // and : http://stackoverflow.com/a/23487435/65706
    $(document).tooltip({
        items: ".item-heading"
        // set static content to the tooltip
        // , content: '<p> <a href="http://www.google.com"> go to google </a>'
        // or
        // set a dynamic content based on the selected element id
        , content: function() {
                //attribute title would do it as well for non html5
                //also any custom attribute name would do it for html5
                var el_id= $(this).attr('id');
                var id=el_id.split('-')[1];
                var d_link = "http://www.somesite.com/page.php?id=" + id ;
                d_link = "<p><a href=\"" + d_link + "\"> go to link " + 
                id + " </a></p>" ;
                return d_link ;
        }
        , open: function( event, ui ) {
                ui.tooltip.animate({ top: ui.tooltip.position().top + 4 }, "fast" );
            }
        , close: function( event, ui ) {
                ui.tooltip.hover(
                    function () {
                     $(this).stop(true).fadeTo(400, 1);
                        //.fadeIn("slow"); // doesn't work because of stop()
                    },
                    function () {
                        $(this).fadeOut("400", function(){ $(this).remove(); })
                    }
                );
        }
});
    </script>
</body>
</html>

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

4 个答案: