ansaurus

Question

Linking/unlinking jquery object to an element

Answer 1

+1 A:

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

Jacob Relkin 2010-01-23 19:36:01

!!! Thanks !!! :)

Jacob Relkin 2010-01-23 20:21:14

OOps! Try clicking John, Mary and John again

Dan 2010-01-23 20:53:49

you still here?

Dan 2010-01-23 23:54:39

Answer 2

+1 A:

How about this alternative solution?

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

Ben Koehler 2010-01-28 15:43:41

Answer 3

+2 A:

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.com/ajax/libs/jquery/1.4.0/jquery.min.js"&gt;&lt;/script&gt;
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"&gt;&lt;/script&gt;

<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
<![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>

Vinodh Ramasubramanian 2010-01-28 22:51:00

Thanks, working!In your exaple - is it possible to remove a click event and instead trigger the tooltip prorammaticaly for specific id like this: function hover_tooltip(id){ /*todo*/}//PS: There must me <=1 tooltip on the page

Dan 2010-02-01 13:20:43

Do you want an element with specific id to show the tooltip when hovered on or trigger it upon some other condition programatically?When will the hover_tooltip(id) be called?

Vinodh Ramasubramanian 2010-02-01 16:33:09

I mean hovering on some program action. For example these tooltips can work great in form validation.

Dan 2010-02-01 22:40:13

I need a to call a function hover_tooltip(id) to create a tooltip an an element and delete old tooltip

Dan 2010-02-03 01:23:08

Check the modified script

Vinodh Ramasubramanian 2010-02-03 03:35:16

ansaurus

tags:

views:

answers:

Linking/unlinking jquery object to an element

related questions