Coin des Experts - Réponse : bulle d'aide javascript

Cette bulle ne s'ouvre sur la gauche que s'il y a assez de place. Sinon, elle essaie une position centrée; s'il n'y a toujours pas assez de place sur la gauche, elle s'ouvre sur la droite (quoi qu'il arrive).

Attention : si on ne précise pas sa hauteur (height), la bulle aura néammoins (en général) la hauteur requise, mais le script lui affecte une hauteur de 50px qui risque d'être insuffisante (risque de coupure par le bas de la fenêtre).

Par exemple, IE5-mac arrêtera l'affichage pile au height annoncé et la bulle sera toujours tronquée.
NN6 affichera tout le texte, mais en dehors du fond de la bulle, et le texte débordant se mélangera au texte de la page.

Comment faire une bulle d'aide en javascript : une alternative

On commencera par préparer toutes les bulles d'aide de la page dans des calques séparés. Il sera important de bien préciser la hauteur pour que la bulle ne soit pas tronquée par les bords de la fenêtre. Le script lira cette hauteur dans le style de la bulle, sans qu'il soit nécessaire de l'inclure dans les arguments de la fonction javascript.

Mise en œuvre et démonstrations

Essayez

Pour la mise en œuvre :

allez chercher le script des fonctions bullepop() et couic() dans notre code et recopiez-le dans la partie <HEAD> de votre page.
Préparez les calques de chacune de vos bulles, en précisant bien les width et height (en pixels) à chaque fois
L'appel et la disparition des bulles sont commandées par des instructions
```
onMouseOver="bullepop('id_bulle',event)"
onMouseOut="couic()" 
```
L'argument «event» est obligatoire tel quel. Le premier argument est l'identificateur (ID) du calque de la bulle

Lisez aussi les commentaires dans notre script.

Essayez

Les contre-indications

Ça marche avec presque tous les navigateurs. «Presque» seulement, à cause de iCab (mac) (et peut-être d'autres que nous n'avons pas testés), mais tant que iCab ne saura pas afficher correctement les calques, on ne pourra pas le compter sérieusement dans la cour des grands. Sinon, ça marche bien avec IE5+, NN6+, Mozilla et Opera7.

Un gros bémol : ça ne fonctionne sur IE6 que si le doctype est un HTML 4 transitional sans URL (ou s'il n'y a pas de doctype du tout), c.à.d. si IE6 reste dans son mode «compatible microsoft».

Pour Opera, ça ne fonctionne correctement qu'à partir de la version 7. Ça doit marcher avec la version 5, mais le cas de la version 6 est désespéré... Espérons qu'il n'y aura pas de rechute dans l'avenir !

Un avantage annexe de cette méthode est qu'on peut se débrouiller pour que l'information contenue dans les bulles reste accessible même si le visiteur a désactivé son javascript. Il faut évidemment préparer tous les calques de bulle en visibility:visible puis les rendre invisible par un script déclenché en fin de page, et surtout, il faut réfléchir à l'organisation de la page à la fois pour que le maintien de ces bulles ne brouille pas la lecture de la page et pour que le lecteur devine sans trop de mal à quoi se serait rattachée la bulle.

A signaler toutefois qu'une bonne indication de la hauteur est plus délicate qu'il n'y paraît quand on utilise un «vieux» navigateur comme IE5.5-windows, car celui-ci ne tient pas compte du height si celui-ci est trop petit. Dans ce cas, l'auteur ne se rend compte de rien, sauf que la bulle peut être anormalement coupée par le bas de la fenêtre (mais ce n'est pas évident à tester). Le vrai risque est que la bulle ne sera pas correctement affichée dans les navigateurs plus modernes qui prennent le height à la lettre : la couleur de fond et/ou la bordure s'arrêtera pile sur la hauteur prescrite alors que le contenu, soit sera tronqué, soit débordera au grand dam potentiel de ce qui sera dessous.

Toutefois, tout comme notre premier script, il vaut mieux éviter d'ouvrir ces bulles à proximité des cases d'un formulaire, parce que ces cases peuvent réapparaître au-dessus de ces bulles, voire au milieu, avec IE5/6 ou Opera sous Windows ; le fonctionnement sous MacOS ou de NN6/Mozilla reste normal, mais ces configurations sont minoritaires.