Linking/unlinking jquery object to an element
<p>I'm using a jquery flowplayer tools plugin <a href="http://flowplayer.org/tools/tooltip.html">http://flowplayer.org/tools/tooltip.html</a></p>

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

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

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

<p>4)So, there should &lt;=1 tooltip on the page</p>

<p>Can you please help me?</p>

<p>Here's the code, it runs standalone</p>

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

    &lt;script type="text/javascript"&gt;


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

    &lt;/script&gt; 

  &lt;style&gt;
    .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;
    }

  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;h1 onclick="do_tip(this.id)" id="_1"&gt;John&lt;/h1&gt;
    &lt;h1 onclick="do_tip(this.id)" id="_2"&gt;Mary&lt;/h1&gt;
    &lt;h1 onclick="do_tip(this.id)" id="_3"&gt;Dan&lt;/h1&gt;
    &lt;h1 onclick="do_tip(this.id)" id="_4"&gt;Paul&lt;/h1&gt;
    &lt;h1 onclick="do_tip(this.id)" id="_5"&gt;Kim&lt;/h1&gt;

    &lt;div class="tooltip"&gt;There should be only one tooltip on a page!&lt;/div&gt;

&lt;/body&gt;&lt;/html&gt;
</code></pre>
