Widget.Tooltip demo

This library provides a tooltip widget that could possibly be used to provide user hint.
The tooltip is shown when user's mouse is over the reference object, which could be any document element.
The content of the tooltip is given in plain text or DOM element (?!)
When user moves the mouse, the tooltip will follow the mouse (enableMove), and when user clicks the reference object, the tooltip will freeze on current position.
Clicking on the reference object again will release it (enableLock).

Class overwrittable properties

elementId: mandatory!
tooltipContent: tooltip content, default `Empty tooltip!'
tooltipClass: CSS class, default tooltip
enableLock: default 1
enableMove: default 1
offsetX: default 16
offsetY: default 16
fadeOut: milliseconds before tooltip disappearing, default 0

Examples

Normal text in a paragraph (follow and lock)...

new Widget.Tooltip({ elementId: 'text1', tooltipContent: '<b>more fun:</b><br /><a href="http://www.sabadelli.it/edoardo/" title="click it!"><img src="http://www.sabadelli.it/edoardo/gif/logo.gif" /></a>' });

a link surrounded with some text (no follow, no lock, fade out)...

new Widget.Tooltip({ elementId: 'link1', enableMove: 0, enableLock: 0, tooltipContent: 'simple text' });

div element with a surprise!

new Widget.Tooltip({ elementId: 'div1', enableMove: 0, tooltipContent: 'funny style<a href="#">click</a> inside!', tooltipClass: 'funny', offsetX: -46 });