[DOM Tooltip] Example 4: Behavior Options

This example demonstrates the different behaviors that can be assigned to the tips! The term 'sticky' simply means that the tooltip does not go away when the mouse moves away from the target or the tip. The previous examples used the 'greasy' setting. To close a sticky tooltip, you just click on the '[close]' dialog, which is auto-generated and set using the 'closeLink' option. The second target (notice, not a link) uses a custom link inside the contents using the domTT_close() method. The final link uses the 'velcro' setting, which causes the tip to disappear only when the mouse moves out of the tip itself.

+ Click to stick + | + Custom close link + | + Velcro tooltip + | + Name: +

This example also demonstrates another important feature. First, click on the left link. Then, before closing the tooltip tip, fly over the second target. Ah!...two tooltips can co-exist. Tips can either be on links or on plain text. Also, notice they are on top of each other. Well...go on, click and drag the caption part of the first two tips to move them around! You will see that the tip being dragged always goes on top of the stationary tip.

The example on the right demonstrates the use of tooltips on form fields. The onclick event makes a call to domTT_deactivate(this.id), which deactivates the tooltip. The id is always available on an element following domTT_active(). (Please note, disabed form fields do not have positions in the page. It is necessary to emulate a disabled field using the blur function.)