Question

我正在使用jquery flowplayer工具插件http://flowplayer.org/tools/tooltip.html

1）我希望在用户点击元素时创建工具提示。

2）当用户点击另一个元素时，旧的工具提示必须取消关联（删除）

3）应为所点击的元素

创建一个新的工具提示（或旧的移动）

4）因此，页面上应该＆lt; = 1工具提示

你能帮帮我吗？

这是代码，它独立运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
    <title>jQuery tooltip</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>

    <script type="text/javascript">


/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/
    $(document).ready(function() {
        $("#_2").tooltip({ 
            effect: "slide", 
            tip: '.tooltip' ,
            position: 'bottom center'
        }); 

    });
/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/




/** The code below is not working as I expect, it doesn't MOVE tooltip **/

           var old_id;

    //first time - create tooltip
        function my_create(id){
            $("#"+id).tooltip({ 
                effect: "slide", 
                tip: '.tooltip', 
                position: 'bottom center'
            });     
        }

     //next times - move tooltip to other element
        function my_unlink(id){
            $("#"+id).unbind("mouseover"); 
            //todo
        }

        function my_link(id){
            //todo
        }


        //THE MAIN FUNCTION

        function do_tip(new_id){
            if(old_id){
                my_unlink(old_id);
                my_link(new_id);
                alert(new_id);
            }
            else
                my_create(new_id);

            old_id=new_id;
         //new_id.focus();
     } 

    </script> 

  <style>
    .tooltip {
      display: none;
      background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
      font-size:14px;
      height:70px;
      width:160px;
      padding:25px;
      color:#fff;   
    }
    h1 {
      width: 400px;
      text-align: center;
      background-color: yellow;
    }

  </style>
</head>
<body>

    <h1 onclick="do_tip(this.id)" id="_1">John</h1>
    <h1 onclick="do_tip(this.id)" id="_2">Mary</h1>
    <h1 onclick="do_tip(this.id)" id="_3">Dan</h1>
    <h1 onclick="do_tip(this.id)" id="_4">Paul</h1>
    <h1 onclick="do_tip(this.id)" id="_5">Kim</h1>

    <div class="tooltip">There should be only one tooltip on a page!</div>

</body></html>

Answer 1

jQuery tools tooltip支持定义触发工具提示的事件。

您不需要自己处理点击事件。

编辑：更新了脚本。单击链接将工具提示始终移动到第二个元素。

以下是script

var tt = $("h1").tooltip({
  events:{def:'click, click'},
  effect: "slide",
  tip: '.tooltip' ,
  position: "bottom center",
  api: true,
  delay: 30000
});

$("#ht").click(function() {
  tt.hide();
  $("#_2").tooltip().show();
});

整个剧本

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>

<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
</style>
<style>
    .tooltip {
      display: none;
      background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
      font-size:14px;
      height:70px;
      width:160px;
      padding:25px;
      color:#fff;   
    }
    h1 {
      width: 400px;
      text-align: center;
      background-color: yellow;
      cursor:pointer;
    }

 </style>

</head>
<body>

    <h1 id="_1">John</h1>
    <h1 id="_2">Mary</h1>
    <h1 id="_3">Dan</h1>
    <h1 id="_4">Paul</h1>
    <h1 id="_5">Kim</h1>

    <a id="ht" href="javascript:void()">Click here</a>
    <div class="tooltip">There should be only one tooltip on a page!</div>

</body>
</html>

<script>

var tt = $("h1").tooltip({
  events:{def:'click, click'},
  effect: "toggle",
  tip: '.tooltip' ,
  position: "bottom center",
  api: true,
  delay: 30000
});

$("#ht").click(function() {
  tt.hide();
  setTimeout(function(){$("#_2").tooltip().show();}, 500);
});

</script>

Answer 2

FlowPlayer工具提示有一个API，每次调用tooltip时都会返回。

然后，您可以在API对象上调用hide。

以下是您的代码应该是什么样的：

    var old_id, API;

//first time - create tooltip
    function my_create(id){
        API = $("#"+id).tooltip({ 
            effect: "slide", 
            tip: '.tooltip', 
            position: 'bottom center'
        });     
    }

 //next times - move tooltip to other element
    function my_unlink(id){
        API.unbind("mouseover"); 
        //todo
    }

    function my_link(id){
        my_create( id );
    }


    //THE MAIN FUNCTION

    function do_tip(new_id){
        if(old_id){
            my_unlink(old_id);
            my_link(new_id);
            alert(new_id);
        }
        else
            my_create(new_id);

        old_id=new_id;
     //new_id.focus();
 }

Answer 3

这种替代解决方案怎么样？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
    <title>jQuery tooltip</title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> -->
    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
    <script type="text/javascript">

   $(document).ready(function() {
        $("h1").tooltip({ 
            effect: "slide", 
            tip: '.tooltip' ,
            position: 'bottom center',
            onBeforeShow: function(event){
                //don't show tooltip if trigger (h1 object) does not have specified class
                if(!this.getTrigger().hasClass("hasToolTip")) 
                    return false;                       
            }
        }); 

        $("h1").click(function() {
            $("h1").removeClass("hasToolTip");
            $(this).addClass("hasToolTip");
        }); 
    });

    </script> 

  <style>
    .tooltip {
      display: none;
      background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
      font-size:14px;
      height:70px;
      width:160px;
      padding:25px;
      color:#fff;   
    }
    h1 {
      width: 400px;
      text-align: center;
      background-color: yellow;
    }

  </style>
</head>
<body>

    <h1 id="_1">John</h1>
    <h1 id="_2">Mary</h1>
    <h1 id="_3">Dan</h1>
    <h1 id="_4">Paul</h1>
    <h1 id="_5">Kim</h1>

    <div class="tooltip">There should be only one tooltip on a page!</div>

</body></html>

将jquery对象链接/取消链接到元素

3 个答案: