NAME

    Widget.Tooltip - Unobtrusive javascript class for create and handle
    tooltips

SYNOPSIS

     <!-- XHTML page -->
     <p id="text1">some text...</p>
    
     // javascript code
     new Widget.Tooltip({ elementId: 'text1', tooltipContent: 'tooltip for some text' });

DESCRIPTION

    This nice class implements some methods for adding tooltips on document
    elements. The tooltip can contain plain text or some XHTML markup. When
    the user moves the mouse over the reference element, the tooltip is
    shown. By setting some configurable options is possible to control the
    tooltip behaviour, by default the tooltip follows the mouse when is
    moved, stops and freezes on a left button click, another click will
    unlock the tooltip.

    Tested under Firefox 2, Internet Explorer 6/7, Opera 9.

METHODS

 new()

    Class constructor. If the DOM element specified in the elementId
    property exists, returns a new Widget.Tooltip object, otherwise returns
    the undefined value.

  Parameters

    oProps

      Object literal where must be specified the element id on which add
      the tooltip, the tooltip content and other optional properties that
      overwrites the defaults.

      Properties are:

      elementId

	ID of the element on which add a tooltip. mandatory!

      enableLock

	Defines if the tooltip must freeze on the current mouse position by
	clicking the reference element (default is 1=enabled, set to 0 to
	disable).

      enableMove

	Defines if the tooltip must follow the mouse pointer when is moved
	(default is 1=enabled, set to 0 to disable).

      fadeOut

	Time expressed in milliseconds after which the tooltip will be
	hidden (default 0=disabled).

      offsetX

	Horizontal distance in pixels from the mouse pointer of the tooltip
	top-left corner (default is 16).

      offsetY

	Vertical distance in pixels from the mouse pointer of the tooltip
	top-left corner (default is 16).

      tooltipClass

	CSS class to assign to the tooltip div element (default is
	`tooltip'), useful for adding some make-up to the tooltip.

      tooltipContent

	Content of the tooltip. Usually some text you want to show. You can
	pass also an XHTML string. If nothing is provided, the default text
	`Empty tooltip!' is used.

 hide()

    Hides the tooltip.

 move()

    Moves the tooltip following the mouse pointer (depending on the
    enableMove flag setting).

 show()

    Shows the tooltip.

 toggleLock()

    Freezes/unfreezes the tooltip by switching the internal lock flag
    (depending on the enableLock flag setting).

EXAMPLES

     <!-- you can initialize the class within your XHTML page like this -->
      <p id="text1">some text...</p>
      <p>an image<br />
      <img src="/src/e/ed/edoardo/WidgetTooltip_003/README/ghost.png" /></p>
      <p>you can also have a <a id="anchor1" href="/src/e/ed/edoardo/WidgetTooltip_003/README/somewhere_else/index.html">link</a> within the text on which you want to add a tooltip.</p>
    
      <script type="text/javascript">
       new Widget.Tooltip({ elementId: 'text1', tooltipContent: 'tooltip for some text (fades out in 5 seconds)', fadeout: 5000 });
       new Widget.Tooltip({ elementId: 'img1', tooltipContent: 'where is the image?!<br />click <a href="#" onclick="showImage(\'img1\')">here</a>...' });
       new Widget.Tooltip({ elementId: 'anchor1', tooltipContent: 'a link must be clickable, so you should set enableLock to 0 on this tooltip!', enableLock: 0 });
      </script>
    
     // or in a more unobtrusive way put the new in an included javascript file.
     // be sure to call the new when the page is loaded!
     // a cross-browser way may be this
     if( document.addEventListener )
     {
         document.addEventListener(
           'load',
           function() {
               new Widget.Tooltip({ elementId: 'text1', tooltipContent: 'tooltip for some text (fades out in 5 seconds)', fadeout: 5000 });
               new Widget.Tooltip({ elementId: 'img1', tooltipContent: 'where is the image?!<br />click <a href="#" onclick="showImage(\'img1\')">here</a>...' });
               new Widget.Tooltip({ elementId: 'anchor1', tooltipContent: 'a link must be clickable, so you should set enableLock to 0 on this tooltip!', enableLock: 0 });
           },
           false
         );
    
         return true;
     }
     else if( document.attachEvent )
     {
         return document.attachEvent(
           'onload',
           function() {
               new Widget.Tooltip({ elementId: 'text1', tooltipContent: 'tooltip for some text (fades out in 5 seconds)', fadeout: 5000 });
               new Widget.Tooltip({ elementId: 'img1', tooltipContent: 'where is the image?!<br />click <a href="#" onclick="showImage(\'img1\')">here</a>...' });
               new Widget.Tooltip({ elementId: 'anchor1', tooltipContent: 'a link must be clickable, so you should set enableLock to 0 on this tooltip!', enableLock: 0 });
           }
         );
     }

SEE ALSO

    Official web page at
    http://www.sabadelli.it/edoardo/projects/javascript/widget.tooltip

    JSAN http://openjsan.org/

AUTHOR

    Edoardo Sabadelli, <edoardo.sabadelli@gmail.com>

COPYRIGHT

    Copyright (c) 2007 Edoardo Sabadelli. All rights reserved.

    This module is free software; you can redistribute it and/or modify it
    under the terms of the Artistic license.

</html>