Infobulle (Popup) en CSS

Jeudi 5 janvier 2006

Mise à jour le 14/05/2007 00:25

Cet article est obsolète, courrez voir: Infobulle en css (2) - CSS tooltips

Traditionnellement pour créer une infobulle personnalisée on utilise le javascript. Pour les blogmestres matériellement limités (Utilisateurs d'Over-Blog en mode confiance) vous allez pouvoir, grâce à cet article créer des infobulles en CSS.

Exemple

En plaçant le curseur de votre souris sur le mot souligné en pointillé vous verrez apparaître une infobulle en CSSCascading Style Sheets : feuilles de style en cascade.

Si vous ne voyez pas les infobulles s'afficher pensez à actualiser le cache de votre navigateur: Ctrl + F5

Comment faire

Pour obtenir ce résultat vous devez procéder en 2 ètapes:

La première, vous devez ajouter dans votre CSSCascading Style Sheets : feuilles de style en cascade (au niveau des éléments principaux) le code suivant:

CSS

a.info {
position:relative;
border-bottom:1px dashed #808080;
text-decoration: none;
font-weight: bold;
}
a:hover.info {
text-decoration: none;
background: none;
}
a.info span {display: none;}
a:hover.info span {
display: inline;
position: absolute;
top:1.5em;
left:0.5em;
z-index: 20;
background: #446D87;
color: #fff;
border:1px solid #000;
width:150px;
text-align:center;
font-weight:normal;
font-size: 10px;
line-height:12px;
padding:2px 4px;
}

La deuxième, dans vos articles, chaque fois que vous voulez insérer une infobulle à un mot ou une expression, il suffit de mettre le code suivant en mode source:

HTML

<a href="#" class="info">texte<span>définition dans infobulle</span></a>

Aller plus loin...

Bien entendu vous pouvez modifier la couleur de fond de l'infobulle, sa taille, la police, sa couleur, la taille des caractères et même l'appliquer à une image (voir les commentaires)... J'ai mis dans le CSS, à cet effet, beaucoup de propriétés non obligatoires. Seules les propriétés en gras le sont.

Références:

commentaires (0) publié dans : CSS