CoupdePouce

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
<em style="-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;">
<span>&nbsp;</span>
Texte de l'infobulle</em></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;">
<span>&nbsp;</span>
Texte de l'infobulle</em></a>

Exemple:

 J'aime beaucoup les caniches!