Créer une infobulle
Un petit tutoriel pour vous montrer comment faire une info bulle personnalisable en css.
1. Le code HTML
Tout d'abord, inserez dans votre page, le code suivant :
<a class="infobulle" href="#">texte<span>infobulle</span></a>
Placez votre le texte (ou ce que vous voulez) à la place du mot 'texte'. Et placez le contenu de l'infobulle entre les balises .
Voilà en ce qui concerne le code HTML.
Rappel : n'oubliez pas d'appeler la feuille de style entre vos balises <head></head>
2. Le code CSS
a.infobulle {
/* on définit le lien présent dans la balise info */
position: relative;
color: blue;
font-style : italic;
text-decoration: none;
}
a.infobulle span {
/* on cache l'infobulle */
display: none;
}
a.infobulle:hover {
/* aucun arrière plan */
background: none;
/* On définit une valeur pour que l'info bulle s'affiche au dessus du texte */
z-index: 10;
}
a.infobulle:hover span {
/* on affiche l'infobulle en ligne */
display: inline;
/* on définit la position du block */
position: absolute;
/* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
white-space: nowrap;
/* on positionne notre infobulle */
top: 30px;
left: 20px;
/* couleur de l'arrière plan */
background-color: white;
/* couleur du texte */
color: blue;
/* marge interne */
padding: 3px;
/* bord de l'info bulle */
border: 1px solid blue;
border-left: 3px solid blue;
}
/* on définit le lien présent dans la balise info */
position: relative;
color: blue;
font-style : italic;
text-decoration: none;
}
a.infobulle span {
/* on cache l'infobulle */
display: none;
}
a.infobulle:hover {
/* aucun arrière plan */
background: none;
/* On définit une valeur pour que l'info bulle s'affiche au dessus du texte */
z-index: 10;
}
a.infobulle:hover span {
/* on affiche l'infobulle en ligne */
display: inline;
/* on définit la position du block */
position: absolute;
/* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
white-space: nowrap;
/* on positionne notre infobulle */
top: 30px;
left: 20px;
/* couleur de l'arrière plan */
background-color: white;
/* couleur du texte */
color: blue;
/* marge interne */
padding: 3px;
/* bord de l'info bulle */
border: 1px solid blue;
border-left: 3px solid blue;
}
Un petit exemple pour illustrer :
Voici l'exemple d'un mot avec une infobulle sur du textecoucou !! je suis l'infobulle !
Je me personnalise tant que je veux.
Amusez vous mais n'en abusez pas ! :)