Home/ Questions/Q 563349
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T12:39:02+00:00

$(#id).tooltip({ effect: slide, tip: ‘.tooltip’ }); I want to delete the object created by

  • 0
$("#id").tooltip({ 
        effect: "slide", 
        tip: '.tooltip' 
    });

I want to delete the object created by this code.

“flowplayer jquery tools” plugin

This question has an answer described in the bottom of my post!

See the bottom if you don’t wanna loose you time

.

———-UPDATE———-

That should be something like this

The code:

<!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>

.

———UPDATE 2———-

Here’s the answer

Linking/unlinking jquery object to an element

The moral of this long tale is:

I’ve been thinking it’s a common, not code or plugin-specific question. I thought that the solution should be as simple as “destroy old tooltip object and then create a new one, attatched to other element”

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You write that you want to delete the object created by the code.

    What the code does is that first searches for an element with id ‘ID’ in your page,
    let’s call this “the trigger”.

    I’m changing one thing in the code here: Instead of selecting the trigger by id ‘ID’
    I select using the class ‘do_tooltip_for_this’. This way I can set up a tooltip for
    multiple triggers at once.

    If the user moves the mouse over the trigger, an element with class ‘tooltip’, that is
    already present in the page, will be shown and positioned near that trigger.
    If the user moves the mouse away from the trigger this element is automatically hidden again.
    This works for several triggers as well, the same tooltip is reused.

    You can also hide the tooltip by hand by writing

      $('.tooltip').hide();

    You can disable the whole behaviour by writing

    $(".do_tooltip_for_this").unbind("mouseover");

    Here’s the whole code:

        <!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">
      var o;
    $(document).ready(function() {

    o = $(".do_tooltip_for_this").tooltip({ 
        effect: "slide", 
        tip: '.tooltip' ,
        position: 'bottom center'
    }); 
                  
    });
  </script> 
  <style>
    .tooltip {
      display: none;
      background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
      font-size:12px;
      height:70px;
      width:160px;
      padding:25px;
      color:#fff;   
    }
    h1 {
      width: 400px;
      text-align: center;
      background-color: yellow;
    }

  </style>
</head>
<body>

    <h1 title="a tooltip regarding John" class="do_tooltip_for_this">This is John</h1>
    <h1 title="a tooltip regarding Paul" class="do_tooltip_for_this">This is Paul</h1>
    <h1 title="a tooltip regarding George" class="do_tooltip_for_this">This is George</h1>
   <h1 title="a tooltip regarding Ringo" class="do_tooltip_for_this">This is Ringo</h1>

    <div class="tooltip"></div>

</body></html>
    • 0