发表新帖
发表新帖

jQuery UI Tooltip with dynamic content

前端 未结
关注
4 833
再見小時候
再見小時候 2021-01-22 13:20

I use jQuery UI Tooltip Widget and there is code:

  $(function() {$( document ).tooltip({  
    content: \'connecting\',
    content:function(callback) {
相关标签:
4条回答
  • 旧时难觅i
    2021-01-22 13:28 
    <!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>
    0 讨论(0)
  • 被撕碎了的回忆
    2021-01-22 13:31

    You should got for this:

    $('body').tooltip({
    selector: '[data-toggle=tooltip]'
});
    0 讨论(0)
  • 再見小時候
    2021-01-22 13:34

    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
    0 讨论(0)
  • 星月不相逢
    2021-01-22 13:34

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题