Tooltips avec Javascript

Généralités

<SCRIPT SRC=wz_tooltip.js></SCRIPT>

Bibliothèque à ajouter au début du document juste après le tag <BODY>. La bibliothèque wz_tooltip.js permet de faire des bulles améliorées contenant du HTML mais aussi des menus contextuels ou une simplement avec Javascript tout en fonctionnant sur tous les navigateurs.

La seule chose à faire est d'ajouter deux attributs onmouseout et onmouseover aux balises concernées.

<img src="image.jpg" onmouseout="UnTip()" onmouseover="Tip('<i>Contenu de ma bulle</i>')">

ALT de TITI

Exemple avec une mini image (renseigner attributs width et height)

Options

A mettre dans le script du onmouseover. Ce sont des constantes, paramètres optionnels de la fonction Tip (ou TagToTip). Ils vont deux par deux: le paramètre suivi de sa valeur. L'ordre des paramètres est indifférent.

Exemple:

<a href="index.htm" onmouseover="Tip('ma bulle', SHADOW, true, TITLE, 'Some Title', PADDING, 9)" onmouseout="Untip()">Exemple</a>

Exemple

Booleens

ABOVE, LEFT, STATIC (ne bouge pas avec pointeur)

Chaine (entre ' et ')

TITLE, BGIMG, PADDING, SHADOWCOLOR, BORDERCOLOR, FONTSIZE, '0.8em'

entier

WIDTH, BORDERWIDTH, DURATION (ms), OFFSETX, OFFSETY, OPACITY

FIX , [200, 2400]

L'option la plus intéressante est STICKY=true qui perme de créer un menu contextuel.
Autre intéressante: TITLE='mon titre';

Liste complète des options

Utilisation contenu HTML

On peut aussi créer des bulles ou des pop-up depuis le contenu d'un div présent sur la page en référençant l'ID du div via TagToTip(p_ID)

onmouseover="TagToTip('div2')" onmouseout="UnTip()"

Utile pour les notes par exemple

Le contenu de la fenêtre modale est directement inclus dans le HTML et sera pris en compte par les moteurs de recherche. L'élément conteneur correspondant est à masquer par display:none

<a href="index.htm" onmouseover="TagToTip('Span2')" onmouseout="UnTip()">Accueil</a> <span id="Span2">C'est plus simple pour les caractères spéciaux.</span>

Utiliser COPYCONTENT,false pour travailler sur original (permet de conserver contenu d'un formulaire ou de bénéficier des styles hérités)

Pop-ups

Utiliser options CLOSEBTN,true,COPYCONTENT,false,STICKY,true,EXCLUSIVE,true,CENTERWINDOW,true,CENTERALWAYS,true CENTERWINDOW et CENTERALWAYS sont dans extension tip_centerwindow.js qui normalement est à inclure séparément à la suite de wz_tooltip.js (en pratique extension incluse en dur dans wz_tooltip.js pour ne pas se compliquer la vie)

Pour refermer modale: tt_HideInit() (FADEOUT) et tt_Hide()

A savoir

L'insertion de wz_tooltip.js doit se faire juste après le tag BODY
Le HTML à afficher dans la bulle Tip=monHTML peut être obtenu via une variable ou une fonction.
onmouseover="Tip="l'été"" marche bien pour inclure des apostrophes.
Les apostrophes ' doivent être précédés de \
" doit être sous la forme "
L'utilisation des entités est obligatoire pour les accents
Exceptions utiliser & amp; & lt; et & gt; (avec un espace!)
Extension tip_balloon.js qui permet d'avoir des bulles en forme de ballon (Chemin des images à préciser par BALLOONIMGPATH ou directement dans le fichier js). Forme simple

Utilisation de ToolTip pour fenêtres modales