Tooltips.js v0.3

(c)Matthias Platzer, based on script.aculo.us and prototype.js

Tooltips.js depends on the latest versions of prototype.js and script.aculo.us from SVN.

This example also depends on two patches to prototype.js
Ticket #3573 (enhancement) and
Ticket #3572 (defect)

Activating Mouseover Tooltips

<script type="text/javascript" src="tooltips.js"></script>
<script type="text/javascript">Tooltips.activateOnLoad();</script>

This will activate all tooltip-triggers (all elements using the sytle class "tooltipTrigger") and use the standard options for hover tooltips.

Binding triggers to tooltip popUps

This tooltip uses an anchor for finding its popUp hint. <a href="#tooltipOne" ... >

Tooltip

A tooltip is an information that pops up on hovering a text or icon, describing the funtion or text.

This is a text with an inline span with class="tooltipTrigger" and an title attribute, which will be converted to a tooltip popup.

This tooltip has the id="tooltipThree", and will popup a div with the id="tooltipThreePopUp"

Tooltip

A tooltip is an information that pops up on hovering a text or icon, describing the funtion or text.

Activating Action Tooltips

A hint will be displayed on triggering an action (clicking a link or button)

<script type="text/javascript">ActionHints.activateOnLoad();</script>

Ok, here is some you can click!

Action Info

You just klicked a button!

Section Triggers

A section in your page will be hidden on load and can be expanded/closed by clicking a trigger.

<script type="text/javascript">SectionTriggers.activateOnLoad();</script>

This will show a section in this page ...

This div is just here to force horizontal and vertical scrollbars..