Skip to content
A simple tooltip-generating script
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
newToolTip.css
newToolTip.js

README.md

A Script for Generating Tooltips

This script was written as part of my working on museum-digital.de. Previously, we had used a tooltip-generating script (e.g. for help text supposed to only appear on hovering over a given symbol) that required both inline javascript and the eval() command. Implementing stricter content securities, this script had to be replaced. The present script serves as this replacement (hence the name "newToolTip").

Features

Positioning
The tooltip's position follows the cursor.
Sticking
Clicking on the trigger element makes the tooltip stay visible even when moving the cursor away.

Usage

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>

Screenshot

The tooltip as used in the input interface of museum-digital

You can’t perform that action at this time.