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
Here's an example of a paragraph with a
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.
- Pure CSS formatting allows infinitely customisable note appearance
using the standards-based technology you know.
- Accessible HTML elements used to construct the notes, so your site
maintains excellent search engine and screenreader compatibility.
- Fallback to regular footnotes give you excellent compatibility
with older browsers if you choose.
- Hover and Click note types give you a choice of activation
method on a per-note basis.
- Nested notes inside other notes supported -- as many as you want!
- Powerful Behaviour and Position system lets you apply common
properties to notes you create with a minimum of fuss.
- Notes are restrained by window edges for optimum display.
- Plugin animation framework allows you to easily implement and
customise animation effects for your notes.
- Customisable show/hide timers applied to notes mean that they
never feel "slippery".
- Tiny, fast script hand-coded for size and speed, so your
visitors won't be kept waiting.
Script License Agreement
You may use this script only if you agree that:
- You must EITHER:
- 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.
- Free Users: All websites using this script for free must contain somewhere
a visible crediting link to TwinHelix Designs, e.g.
- You must leave the "Script Name/Author/URL" comment in the source of the script file.
- This script is provided on an "AS-IS" basis, without any warranties, and you use it entirely
at your own risk.
- 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.
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.
This is a nested note. You can nest as many levels deep as you want!
This note must be manually closed.
This always appears relative to its trigger, regardless of the mouse position.