Inserer des infobulles

Vous aimeriez mettre des infobulles sur certains mots? Alors voici comment procéder.

Toujours dans votre feuille de style, introduisez le code suivant:

a.info em {
display:none;
}
a.info:hover {
border: 0;
position: relative;
z-index: 500;
text-decoration:none;
}
a.info:hover em {
font-size:12px;font-family:arial, helvetica, sans-serif;
display: block;
position: absolute;
top: 20px;
left: 0px;
padding: 5px;
color: #000;
border: 2px solid #bbb;
background: #ffc;
width:150px;
}
a.info:hover em span {
position: absolute;
top: -7px;
left: 8px;
height: 7px;
width: 11px;
background: transparent url(petite flèche);
background-repeat:no-repeat;
margin:0;
padding: 0;
border: 0;
}

Ensuite dans votre article introduisez ce code:

<a href="#nogo" class="info">Texte du lien

 
Texte de l'infobulle</a>.

Et la petite image qui servira pour faire la petite flèche en haut de la bulle:

-moz-border-radius-topleft: correspond au coin arrondi en haut à gauche.
-moz-border-radius-topright: coin arrondi en haut à droite.
-moz-border-radius-bottomleft: coin arrondi en bas à gauche.
-moz-border-radius-bottomright: coins arrondi en bas à droite.

Si vous ne voulez pas de coins arrondis, supprimez -moz-border-radius.

Il ne vous reste plus qu'à modifier les couleurs et la grandeur de la bordure
dans a.info:hover span. Vous pouvez mettre a href="_blank" ou encore a href="#nogo"
si vous ne voulez pas inserer de lien.

Pourquoi les balises em et span? Par-ce que span sert à afficher la bulle et em la petite image.

Exemple avec ce petit texte (sélectionnez les mots en couleur):

Je vous présente une brève déscription du langage CSS Cascading Style Sheets: (feuilles de style en cascade) qui est utilisé pour décrire la présentation d'un document structuré écrit en HTML Hyper Text Markup Language: Langage permettant de mettre en forme des informations sur Internet. ou en XML, et c'est le W3C World Wide Web Consortium: le 3 représente les trois W. qui en a la direction.

Vous pouvez aussi mettre l'infobulle sur une image en procédant ainsi:

<a href="#nogo" class="info"><img src="url_imgage" />
<em style="-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;">
 
Texte de l'infobulle</a>

Exemple:

J'aime beaucoup les caniches!