dongxianghuan3587
dongxianghuan3587
2014-05-06 05:34

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

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

  })});

On my page i have:

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

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

And in HTML i now have:

<teacher id="1">Alex Brown</teacher>
<teacher id="2">John Black</teacher>
<teacher id="3">Homer Simpson</teacher>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • douguadao3883 douguadao3883 7年前

    First you tag your links with a class

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

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

       var link = $(this).attr("title"); // here retrieve the id of the teacher 
    
    点赞 1 评论 复制链接分享
  • duandu6497 duandu6497 7年前

    I think it's best to use HTML5 custom attribute

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

    and script

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

    You can play with this at: http://jsfiddle.net/pT3ed/4/

    Just replace "return $(this).attr('data-id');" with your loader using $(this).attr('data-id') as id.

    点赞 3 评论 复制链接分享
  • duanhan1392 duanhan1392 6年前

    You should got for this:

    $('body').tooltip({
        selector: '[data-toggle=tooltip]'
    });
    
    点赞 1 评论 复制链接分享
  • douyan1321 douyan1321 7年前
    <!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>
    
    点赞 评论 复制链接分享