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.
Features:
- 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.
- Object-orientated JavaScript for separate note systems and easy
implementation; you don't have to know any JavaScript to use this!
- 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.
More info...
- 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'.
- 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.
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.
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.
Here's an example of a paragraph with a
SuperNote.
X Salón Auditórium.
Museo Universidad del Salvador.
Espacio “La botica del Ángel”.
Aula 1.
X Biblioteca
Planta Baja:
Aulas: B; D; E; F; G. Aula C, “Universia”.
Rectorado. Director de Estudios. Asistente de la Dirección de Estudios
Salas de Reunión.
1º Piso:
Sala de consulta bibliográfica. Biblioteca Parlante.
X Pista de Remo
X Pabellón 4
Planta Baja:
Aulas: 407 a 431.
Salón de Estudios (SUM).
Confitería
1º Piso:
Aulas: 451 a 482.
X Pabellón 3
Planta Baja:
Aulas: 312 a 335. Sala de Profesores. Sala del Lago.
Oficinas: Ciencias Jurídicas Psicología y Psicopedagogía.
1º Piso:
Aulas: 364 a 388; Fotocopiadora.
Oficinas: Historia, Geografía y Turismo; Administración; Dirección de Arquitectura; Arte y Arquitectura; Comunicación Social.
X Restaurante
Planta Baja:
Salón Comedor
1º Piso:
Salón de Convenciones.Futuro Hospital Veterinario.(Hoy cancha 1)
X Pabellón 1
Planta Baja:
Aulas: 1 y de 18 a 39. Librería (alumnos y profesores 20% de descuento).Oratorio.Oficinas: Departamento de Recursos Humanos; Ciencias Económicas; Actividad Física y Deportiva; Bienestar Estudiantil.
1º Piso:
Aulas: 101 y de 119 a la 140.Laboratorios de Informática I y II.Laboratorios de Agronomía y Veterinaria.Laboratorios de Idiomas.Oficinas: Administrador del Campus; Tutor; Filosofía y Letras Lenguas Modernas; Ciencias Sociales; Programa Pescar.
X Pabellón 2
Planta Baja:
Aulas: 61 a 80. Fotocopiadora. Dpto. de Ingreso.Programa de Inserción Laboral y Centro para Graduados.
Sala de Profesores.
Oficinas: Vicerrectorado de Formación (VF); Prensa y Relaciones Públicas, Yoga.
1º Piso:
Aulas: 160 a 181. Recepción; Secretaría Unificada; Secretaría General.
Oficinas: Coordinadora de Secretaría Unificada; Veterinaria; Agronomía.
X Pabellón 2
Planta Baja:
Aulas: 61 a 80. Fotocopiadora. Dpto. de Ingreso.Programa de Inserción Laboral y Centro para Graduados.
Sala de Profesores.
Oficinas: Vicerrectorado de Formación (VF); Prensa y Relaciones Públicas, Yoga.
1º Piso:
Aulas: 160 a 181. Recepción; Secretaría Unificada; Secretaría General.
Oficinas: Coordinadora de Secretaría Unificada; Veterinaria; Agronomía.