A Script for Generating Tooltips
- The tooltip's position follows the cursor.
- Clicking on the trigger element makes the tooltip stay visible even when moving the cursor away.
For each tooltip, a trigger and a content element need to be defined. Trigger elements need to be of the CSS class /newToolTipTag/, content elements /newToolTip/.
Trigger elements need to have an additional attribute /data-for/, the value of which is the identifier (minus the prefix tooltip_) of the content element (In the example below: /Inventarnummer/).
The content element's id needs to consist of the name just entered, prepended with the prefix /tooltip_/. Additionally, content elements may carry an attribute /data-title/, in which the title of the tooltip can be defined.
<a class="newToolTipTag" data-for="Inventarnummer"> <img src="img/i.gif"> </a> <span class="newToolTip" id="tooltip_Inventarnummer" data-title="Inventory number"> <p class="toolTipCont"> If the object has no inventory number, please enter something like "no inv. no." If it is a permanent loan, you can add the signature of the organziation lending, followed by the object's inventory number at the given institution and finally a note: "(permanent loan)".<br /><br />Example 1: "G0904"<br>Example 2: "A4711 (new), SMH12 (old)"<br />Example 3: "KHM 1252 (Permanent loan)"<br /><br /><b style="font-weight:normal;color:#660000;">Please always fill in this field!</b> </p> </span>