SuperNote v1.0beta2

by Angus Turnbull - Updated: 25 September 2006.

This is an accessible, CSS/JS based "popup tooltip" script that dynamically converts regular footnotes in a document into tooltips that appear next to their triggering elements.

Here's an example of a paragraph with a SuperNote. SuperNotes are like regular footnotes turbocharged with JavaScript, so they display as tooltips in modern browsers, and remain accessible elsewhere.

This next note is shows on click and is always pinned.

You can also position relative to triggering links.

Finally, here's a click note that's positioned inline.

This appears onclick, and remains visible until you click outside it.



Script License Agreement

You may use this script only if you agree that:

  1. You must EITHER:
    1. Donating Users: This script is "donation-ware". If you can make a donation to support this script, it may be used on a website without a crediting link. Please consider making a donation! I have spent a lot of time developing, debugging and documenting scripts, and any support is welcome. More info...
    2. Free Users: All websites using this script for free must contain somewhere a visible crediting link to TwinHelix Designs, e.g. 'DHTML / JavaScript Tooltips by TwinHelix Designs'.
  2. You must leave the "Script Name/Author/URL" comment in the source of the script file.
  3. This script is provided on an "AS-IS" basis, without any warranties, and you use it entirely at your own risk.
  4. This script may not be redistributed, sold, rented, leased or sublicensed to third parties without my prior consent.

If you have another use for the script (for example, within a web application) or wish to arrange alternate licensing terms, please contact me for more information.


Usage Instructions:

Open this document inside a text editor like Windows Notepad; instructions are within. You don't need to edit the JS file itself, and you can leave the demo script unchanged. You will want to open the .CSS file and change the note formatting there though, and of course add your own notes to the BODY of the page ;).

Good luck - Angus.


Script Help & Hints

Since this is the first release, there aren't many Frequently Asked Questions yet :). If you have trouble, please post something to the Support Forums on my website.

X Hello!
This is your note content. Notes can contain embedded notes too!
This is a nested note. You can nest as many levels deep as you want!
X Always Pinned
This note must be manually closed.
Relative Note
This always appears relative to its trigger, regardless of the mouse position.