problem with tool tip prototype

[fgualda87]

Hey I'm using this tooltip which uses prototype 1.6.1.js

/*
 * Copyright (c) 2006 Jonathan Weiss <[e-mail]>
 *
 * Permission to use, copy, modify, and distribute this software for any
 * purpose with or without fee is hereby granted, provided that the above
 * copyright notice and this permission notice appear in all copies.
 *
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 */
 
 
/* tooltip-0.2.js - Small tooltip library on top of Prototype 
 * by Jonathan Weiss <[e-mail]> distributed under the BSD license. 
 *
 * This tooltip library works in two modes. If it gets a valid DOM element 
 * or DOM id as an argument it uses this element as the tooltip. This 
 * element will be placed (and shown) near the mouse pointer when a trigger-
 * element is moused-over.
 * If it gets only a text as an argument instead of a DOM id or DOM element
 * it will create a div with the classname 'tooltip' that holds the given text.
 * This newly created div will be used as the tooltip. This is usefull if you 
 * want to use tooltip.js to create popups out of title attributes.
 * 
 *
 * Usage: 
 *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
 *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
 *   <script type="text/javascript">
 *     // with valid DOM id
 *     var my_tooltip = new Tooltip('id_of_trigger_element', 'id_of_tooltip_to_show_element')
 *
 *     // with text
 *     var my_other_tooltip = new Tooltip('id_of_trigger_element', 'a nice description')
 *
 *     // create popups for each element with a title attribute
 *    Event.observe(window,"load",function() {
 *      $$("*").findAll(function(node){
 *        return node.getAttribute('title');
 *      }).each(function(node){
 *        new Tooltip(node,node.title);
 *        node.removeAttribute("title");
 *      });
 *    });
 *    
 *   </script>
 * 
 * Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will
 * be shown. On o mouseOut the tooltip disappears. 
 * 
 * Example:
 * 
 *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
 *   <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
 *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
 *
 *   <div id='tooltip' style="display:none; margin: 5px; background-color: red;">
 *     Detail infos on product 1....<br />
 *   </div>
 *
 *   <div id='product_1'>
 *     This is product 1
 *   </div>
 *
 *   <script type="text/javascript">
 *     var my_tooltip = new Tooltip('product_1', 'tooltip')
 *   </script>
 *
 * You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.
 */
 
var Tooltip = Class.create();
Tooltip.prototype = {
  initialize: function(element, tool_tip) {
    var options = Object.extend({
      default_css: false,
      margin: "0px",
        padding: "5px",
        backgroundColor: "#d6d6fc",
        min_distance_x: 5,
      min_distance_y: 5,
      delta_x: 0,
      delta_y: 0,
      zindex: 1000
    }, arguments[2] || {});
 
    this.element      = $(element);
 
    this.options      = options;
 
    // use the supplied tooltip element or create our own div
    if($(tool_tip)) {
      this.tool_tip = $(tool_tip);
    } else {
      this.tool_tip = $(document.createElement("div")); 
      document.body.appendChild(this.tool_tip);
      this.tool_tip.addClassName("tooltip");
      this.tool_tip.appendChild(document.createTextNode(tool_tip));
    }
 
    // hide the tool-tip by default
    this.tool_tip.hide();
 
    this.eventMouseOver = this.showTooltip.bindAsEventListener(this);
    this.eventMouseOut   = this.hideTooltip.bindAsEventListener(this);
    this.eventMouseMove  = this.moveTooltip.bindAsEventListener(this);
 
    this.registerEvents();
  },
 
  destroy: function() {
    Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
    Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
    Event.stopObserving(this.element, "mousemove", this.eventMouseMove);
 
  },
 
  registerEvents: function() {
    Event.observe(this.element, "mouseover", this.eventMouseOver);
    Event.observe(this.element, "mouseout", this.eventMouseOut);
    Event.observe(this.element, "mousemove", this.eventMouseMove);
  },
 
  moveTooltip: function(event){
      Event.stop(event);
      // get Mouse position
    var mouse_x = Event.pointerX(event);
      var mouse_y = Event.pointerY(event);
 
      // decide if wee need to switch sides for the tooltip
      var dimensions = Element.getDimensions( this.tool_tip );
      var element_width = dimensions.width;
      var element_height = dimensions.height;
 
      if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.min_distance_x) ){ // too big for X
          mouse_x = mouse_x - element_width;
          // apply min_distance to make sure that the mouse is not on the tool-tip
          mouse_x = mouse_x - this.options.min_distance_x;
      } else {
          mouse_x = mouse_x + this.options.min_distance_x;
      }
 
      if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.min_distance_y) ){ // too big for Y
          mouse_y = mouse_y - element_height;
        // apply min_distance to make sure that the mouse is not on the tool-tip
          mouse_y = mouse_y - this.options.min_distance_y;
      } else {
          mouse_y = mouse_y + this.options.min_distance_y;
      } 
 
      // now set the right styles
      this.setStyles(mouse_x, mouse_y);
  },
 
 
  showTooltip: function(event) {
    Event.stop(event);
    this.moveTooltip(event);
      new Element.show(this.tool_tip);
  },
 
  setStyles: function(x, y){
    // set the right styles to position the tool tip
      Element.setStyle(this.tool_tip, { position:'absolute',
                                         top:y + this.options.delta_y + "px",
                                         left:x + this.options.delta_x + "px",
                                        zindex:this.options.zindex
                                       });
 
      // apply default theme if wanted
      if (this.options.default_css){
            Element.setStyle(this.tool_tip, { margin:this.options.margin,
                                                               padding:this.options.padding,
                                              backgroundColor:this.options.backgroundColor,
                                                              zindex:this.options.zindex
                                             });    
      }    
  },
 
  hideTooltip: function(event){
      new Element.hide(this.tool_tip);
  },
 
  getWindowHeight: function(){
    var innerHeight;
      if (navigator.appVersion.indexOf('MSIE')>0) {
          innerHeight = document.body.clientHeight;
    } else {
          innerHeight = window.innerHeight;
    }
    return innerHeight;    
  },
 
  getWindowWidth: function(){
    var innerWidth;
      if (navigator.appVersion.indexOf('MSIE')>0) {
          innerWidth = document.body.clientWidth;
    } else {
          innerWidth = window.innerWidth;
    }
    return innerWidth;    
  }
 
}
 

is called tooltipv0.2.js
I'm sure you've heard about it, the thing is that I'm having a little problem

I'm using one tooltip already and it works just fine and it displays everything correctly...
But I need to create a new tooltip when I right click an image and it is showing the tooltip but I need it to stay so I can edit the info inside the tooltip... Is just a table with check boxes.... I've tried everything in modifying the tooltip v02 but came up with nothing more than errors...

any help would be greatly appreciated in advance... this is the code that i have on the html file...

<script type="text/javascript">
document.observe("dom:loaded", function() {    
    $$(".tool").each(function(node){
          var my_tooltip = new Tooltip(node.readAttribute('id'), 'tooltip-'+node.readAttribute('id'))
    });
 
});        
</script>
 

and each div in the code has a name (eg. tt1) and then the table or code for each one is tooltip-tt1 for example



and then

[acoder]

If you need to stay, then don't hide the tooltip onmouseout (line 110). Hide it onclick (e.g. a close link/button, or clicking on the page outside the tooltip boundaries).

Alternatively, use another tooltip which already has this feature.