javascript - Linkingunlinking jquery object to an element

I'm using a jquery flowplayer tools plugin .html

1)I want a tooltip to be created when user clicks on an element.

2)When the user clicks on another element, the old tooltip must be unlinked(deleted)

3)A new tooltip should be created(or old moved to) for the clicked element

4)So, there should <=1 tooltip on the page

Can you please help me?

Here's the code, it runs standalone

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ".dtd">
<html><head>
    <title>jQuery tooltip</title>
    <script src=".3.2/jquery.min.js"></script> 
    <script src=".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(.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>

I'm using a jquery flowplayer tools plugin http://flowplayer/tools/tooltip.html

1)I want a tooltip to be created when user clicks on an element.

2)When the user clicks on another element, the old tooltip must be unlinked(deleted)

3)A new tooltip should be created(or old moved to) for the clicked element

4)So, there should <=1 tooltip on the page

Can you please help me?

Here's the code, it runs standalone

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

Share Improve this question asked Jan 23, 2010 at 19:07 Dan 58k44 gold badges122 silver badges162 bronze badges

1 Does the call to tooltip() return anything? Is there an object representing the tooptip that might have a remove or delete method? – ironfroggy Commented Jan 23, 2010 at 19:11
1)call to tooltip() returns the jquery object and it can also return library-specific API. 2)No, there is no delete() destructor in the library =( – Dan Commented Jan 23, 2010 at 20:55

Add a ment |

3 Answers 3

Sorted by: Reset to default 2 +100

jQuery tools tooltip supports defining which events trigger the tooltip.

You do not need to handle the click event by yourself.

Edit: Updated the script. Click on the link to move the tooltip to the second element always.

Here is the 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();
});

The whole script

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

<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode./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/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>

The FlowPlayer Tooltip has an API that is returned on EVERY call to tooltip.

You can then call hide on the API object.

Here's what your code should look like:

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

How about this alternative solution?

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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744759239a4592071.html

javascript - Linkingunlinking jquery object to an element - Stack Overflow

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Linkingunlinking jquery object to an element - Stack Overflow

3 Answers 3

相关推荐