Comment réaliser des info-bulles

Réalisation: assez facile
Connaissance: un peu de CSS et de html

Commencez par ouvrir votre feuille de style (style.css) et insérez les sections suivantes

/* debut info bulle */
a.info {
position : relative;
z-index : 1;
background-color : #ffff80;
}
a.info:hover {
border-bottom: 0px;
cursor : pointer;
z-index : 2;
background-color : #ffffff;
}
a.info span {
display : none;
font-size : 11px;
width : 200px;
height : 100px;
background-color: #ffffff;
}
a.info:hover span {
display : block;
position : absolute;
z-index : 100;
top : 20px;
left : 35px;
border: 1px dotted #977828;
color : #000000;
text-align : justify;
padding: 6px;
}
/* fin */

Comment faire apparaitre l'info-bulle et le texte associé ?

Ecrivez normalement votre texte dans votre article ou votre éditorial, puis passez en mode source, repérez le mot (ou la phrase) sur lequel vous souhaitez positionner l'info-bulle et écrivez alors le codage suivant:

[a href="#" class="info"]Mot sélectionné[span]Texte de l'info bulle[/span][/a]

Ex: Mot sélectionnéTexte de l'info-bulle
une deuxième ligne
Une troisième ligne

Bien entendu, il est possible d'appliquer les balises html au texte de l'info-bulle

Nota: pour éviter l'interprétation du code, les balises < et > ont été remplacées par [ et ]

 Attention: Ce type d'info-bulle fonctionne mal avec le navigateur Opéra

Voilou, c'est tout ...

La base de ce script circule sous différentes formes sur le net ( Cf: sitedu zéro.com, commentcamarche.net, peutetreunereponse.net,  psacake.com, le labo, etc.) a été repris pour certains éléments sur les sites précités. Je n'ai donc rien inventé ...