Voici un exemple de ces bulles

Qu'est-ce qu'un cadavre exquis graphiqueC'est une composition graphique qui se suit et qu'on ne sait jamais qu'est-ce qu'on aura. ?

Voici à quoi l'image PNG pour la création de cette bulle d'information ressemble. Cet aperçu à directement été pris dans photoshop.

Cliquez içi pour télécharger la vrai image

Maintenant, voici le code pour créé cette bulle d'information

Le code HTML

 
 
<a href="votreDestination" class="info">Le nom de votre lien
<span>La description de votre lien avec un maximum de 130
caractère dans ce cas si</span></a>
 

Le code CSS

 
 
a.info {
    position:relative; /* Très important */
    background:none; /* Important pour le fonctionnement sur IE */
    z-index:10;
}
 
a.info:hover {
    z-index:20;
}
 
a.info span {
    display:none;
}
 
a.info:hover span { /*la tag SPAN apparaitra avec l'effet hover*/
    display:block;
    position:absolute;
    top:18px;
    left:10px;
 
    /* Éléments pour positionner le texte dans la bulle */
    /* Vous pouvez aussi utiliser le padding:24px 8px 5px 25px; */
    padding-left:25px;
    padding-top:24px;
    padding-bottom:5px;
    padding-right:8px;
    width:205px;
    height:45px;
 
    /* Style du character dans la bulle */
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-style:italic;
    font-size:10px;
    color:#999999;
    text-decoration:none;
    text-align:justify;
}
 
/* Pour avoir un beau background de bulle avec PNG transparent*/
a.info:hover>span {
background-image:url(images/bgInfo.png);
}
 
a.info:hover span {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/bgInfo.png",
sizingMethod="crop");
}
 

Voilà, j'espère qu'avec ce tutoriel vous serez en mesure de créé cet effet de bulle à la 2.0. Si vous avez des questions, n'hésitez pas à les poser sur notre forum. Bonne chance !