Créer sa propre info-bulle en CSS

6 avril 2009 à 08:00 (X)HTML, CSS Commentez

Ce tutoriel a pour but de vous donner une technique pour créer vos propres info-bulles en utilisant que du CSS.

Introduction

Dans nos développements Web, il se peut que nous voulions afficher un bloc d'information au survol d'un lien. Malheureusement, l'attribut title de l'élément <a> ne permet que d'afficher quelques mots et rien d'autres.

Suite à l'insuffisance de cette balise, je vous propose une méthode purement CSS qui nous permettra non seulement d'afficher un paragraphe mais également n'importe quel élément du moment qu'il soit un enfant de <a> (par exemple : une image, un champ texte (input), etc.). Nous aurons ainsi une info-bulle personnalisée.

Avant de commencer, je vous suggère de jeter un oeil à cet outil qui vous permettra de connaitre les balises enfants que la balise <a> peut contenir. Ceci vous donnera une idée des possibilités de contenu de vos bulles d'informations.

Dans ce tutoriel nous verrons deux méthodes. La première consistera à créer une info-bulle avec une simple couleur comme arrière-plan, la deuxième, elle, contiendra une image.

Mais avant toutes choses, je tiens à signaler que cette astuce n'est faîte que pour contenir du texte. L'insertion d'un nouveau lien a n'est pas possible.

Info-bulle avec fond coloré

Au cours de ce chapitre nous allons tenter de réaliser une simple info-bulle qui aura un fond coloré et l'apparence de l'image qui suit.

Info-bulle avec fond coloré

Partie (X)HTML

Nous utiliserons, ici, un élément de type span, pour ajouter notre texte. On pourra donc avoir un code du style :

<a class="info_bulle" href="#"> 
    InfoBulle en CSS 
    <span> Réalisation d'une infobulle uniquement avec du CSS. </span> 
</a>

Avec ce code, nous avons un texte sur la même ligne et sans effet de survol, ce qui est tout à fait normal vu que la balise  est de type inline (c'est-à-dire que son positionnement se fait sur la même ligne).

La présence de class="info_bulle" est indispensable pour la suite car c'est grâce à elle que nos effets de style seront appliqués à notre lien.

Pour le moment, nous n'avons pas encore notre info-bulle mais un lien brut avec l'affichage du détail dans la balise span.

Partie CSS

Cette partie est consacrée à la mise en oeuvre du code de personnalisation des balises qui constituent notre bulle d'informations.

Avant toutes choses, il nous faut rendre invisible la balise qui contiendra l'information à transmettre pour n'obtenir que notre lien.

/* Rend invisible tout notre bloc span */  
a.info_bulle span  
{  
    position:absolute;  
    top:-2000em;  
    left:-2000em;  
    width:1px;  
    height:1px;  
    overflow:hidden;  
    background:#DDEEFF; /* Définition du fond, sinon on a le même que notre lien */  
    border:1px solid #6699FF; /* Définition des bordures */  
}

Nous n'utilisons pas un simple display:none afin d'offrir une meilleure accessibilité. En effet, certains lecteurs d'écran savent l'interpréter et ne pourront pas lire son contenu.

Maintenant, nous pouvons personnaliser, aisément, notre lien en lui donnant une apparrence permettant de communiquer aux lecteurs qu'ils auront un supplément d'informations en le survolant. Par exemple, on peut lui attribuer une image représentant une bulle en guise de fond.

a.info_bulle  
{  
    color:#2F368A; /* Couleur de notre lien */  
    font-size:1.2em; /* Taille de la police */  
    text-decoration:none; /* Aucun soulignement du texte */  
    padding:2px 12px 2px 2px; /*Définition des marges intérieures de notre lien */  
    /* Définition de l'arrière plan de notre lien */  
    background:transparent url('comment.gif') no-repeat right center;  
}

Une fois ces deux étapes réalisées, il ne nous reste plus qu'à ajouter le code qui permettra d'afficher notre info-bulle au survol.

/* Rend visible tout notre bloc span et lui attribue une taille */  
a.info_bulle:hover span, a.info_bulle:focus span, a.info_bulle:active span  
{  
    top:auto;  
    left:auto;  
    width:220px;  
    height:auto;  
    overflow:visible;  
}

Malheureusement, avec ce code nous constatons que Internet Explorer 6 (et inférieur) n'affiche pas notre info-bulle contrairement à Firefox, Internet Explorer 7, Opéra, Safari, etc.. Par conséquent, nous devons ajouter la ligne suivante :

a.info_bulle:hover  
{  
    border:0; /* ligne qui corrige le bug d'IE6 et inférieur */  
}

Tel que le code est présenté actuellement, nous aurons un affichage incorrect de notre info-bulle. En effet, elle sera positionnée en bas à droite de notre page et non en dessous de notre lien. Pour y remédier, nous devons ajouter une propriété supplémentaire au code CSS de notre lien.

position:relative; /* Indispensable pour le bon positionnement de l'info-bulle */

Visualisation de notre info-bulle finale

Exemple d'utilisation

Nous avons, enfin, notre bulle d'informations CSS. Il ne nous reste plus qu'à voir le résultat avec un exemple concret.

Code (X)HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
        <title>Info-bulle personnalisée</title>  
        <link rel="stylesheet" href="style.css" type="text/css" />  
    </head>  
    <body>  
        <h4>Exemple d'info-bulle textuelle dans un paragraphe</h4>  
        <p>  
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  
            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint  
            occaecat cupidatat non proident, sunt in culpa qui officia deserunt  
            mollit anim id est laborum.  
        </p>  
        <p>  
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  
            commodo consequat.  
            <a class="info_bulle" href="#">  
                InfoBulle en CSS  
                <span>  
                    Réalisation d'une infobulle uniquement avec du CSS.  
                </span>  
            </a>  
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore  
            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in  
            culpa qui officia deserunt mollit anim id est laborum.  
        </p>  
        <p>  
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  
            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint  
            occaecat cupidatat non proident, sunt in culpa qui officia deserunt  
            mollit anim id est laborum.  
        </p>  
    </body>  
</html>

Code CSS

p  
{  
    font-size:1.1em; /* Définition de la taille de la police de nos paragraphes */  
}  
/* Rend invisible tout notre bloc span */  
a.info_bulle span  
{  
    position:absolute;  
    top:-2000em;  
    left:-2000em;  
    width:1px;  
    height:1px;  
    overflow:hidden;  
    background:#DDEEFF; /* Définition du fond, sinon on a le même que notre lien */  
    border:1px solid #6699FF; /* Définition des bordures */  
}  
a.info_bulle  
{  
    color:#2F368A;  
    text-decoration:none;  
    padding:2px 16px 2px 2px; /*Définition des marges intérieures de notre lien */  
    /* Définition de l'arrière plan de notre lien */  
    background:transparent url('comment.gif') no-repeat right center;  
    position:relative; /* Indispensable pour le bon positionnement de l'info-bulle */  
}  
a.info_bulle:hover  
{  
    border:0; /* ligne qui corrige le bug d'IE6 et inférieur */  
}  
/* Rend visible tout notre bloc span et lui attribue une taille */  
a.info_bulle:hover span, a.info_bulle:focus span, a.info_bulle:active span  
{  
    top:auto;  
    left:auto;  
    width:220px;  
    height:auto;  
    overflow:visible;  
}

Visualisation de notre info-bulle dans un environnement textuel.

Info-bulle avec fond imagé

Ici nous allons tenter de réaliser une info-bulle qui aura comme arrière plan une image. Voici un petit aperçu du résultat final.

Info-bulle avec image comme arrière plan

Partie (X)HTML

Etant donné que la seule différence avec l'info-bulle précédente est son arrière-plan, nous aurons, par conséquent, pratiquement le même code.

<a class="info_bulle" href="#">  
    InfoBulle CSS  
    <span class="info_bulle">  
        <span class="header"></span>  
        <span class="content">  
            Réalisation d'une infobulle uniquement avec du CSS.  
        </span>  
        <span class="footer"></span>  
    </span>  
</a>

On remarque l'apparition de trois nouvelles balises . C'est grâce à elles que nous allons construire notre arrière-plan, à partir d'images préalablement découpées. Vous me demanderez certainement pourquoi utiliser des balises . Tout simplement parce que c'est l'une des balises enfants de <a> et que c'est une balise adaptée à ce genre de création.

Partie CSS

Nous avons vu précédemment l'apparition de nouvelles balises qui consituent l'arrière-plan de notre info-bulle. Au cours de ce chapitre, nous allons utiliser le même code CSS que celui de la partie II-B tout en introduisant le CSS des nouveaux éléments :

le header sera l'élément qui représentera la partie haute de notre info-bulle ;

span.header  
{  
    display:block;  
    height:35px; /* Hauteur correspondant à celle de notre image */  
    line-height:220%; /* Propriété qui centrera le texte verticalement */  
    text-align:center;  
    background:transparent url('./top.gif') no-repeat 0 0;  
    font-size:15px;  
    font-weight:bold;  
}

le content qui contiendra tout le texte de notre info-bulle ;

span.content  
{  
    display:block;  
    background:transparent url('./centre.gif') repeat-y;  
    padding:0 8px;  
}

Nous sommes obligés de mettre un repeat-y afin d'avoir une répétition verticale de notre image. Dans le cas contraire nous n'aurions qu'une partie qui la contiendrait.

et le footer qui, comme son nom l'indique, sera sa partie basse.

span.footer  
{  
    display:block;  
    height:5px;  
    background:url('./bot.gif') no-repeat bottom left;  
    font-size:0; /* Corrige l'espacement inutile sous IE */  
}

Avec un tel code, nous n'aurons pas encore notre info-bulle au survol du lien. Pour y remedier, il faut rajouter un petit élément au code CSS de la balise  principale. En effet, vous avez du remarquer l'apparition d'un class="info_bulle" dans le code (X)HTML de cette balise. Il ne reste donc plus qu'à définir cette classe.

Ainsi le code initial devient donc le suivant :

/* Rend invisible tout notre bloc span */  
a.info_bulle span.info_bulle  
{  
    position:absolute;  
    top:-2000em;  
    left:-2000em;  
    width:1px;  
    height:1px;  
    overflow:hidden;  
}  
/* Rend visible tout notre bloc span et lui attribue une taille */  
a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle, a.info_bulle:active  
span.info_bulle  
{  
    top:auto;  
    left:auto;  
    width:220px;  
    height:auto;  
    overflow:visible;  
}

On obtient, enfin, notre nouvelle info-bulle : voir le résultat.

Exemple d'utilisation

Nous avons, enfin, notre info-bulle améliorée. Il ne nous reste plus qu'à voir le résultat avec notre lien dans un texte.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
        <title>Info-bulle personnalisée</title>  
        <link rel="stylesheet" href="style.css" type="text/css" />  
    </head>  
    <body>  
        <h4>Exemple d'info-bulle textuelle dans un paragraphe</h4>  
        <p>  
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  
            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint  
            occaecat cupidatat non proident, sunt in culpa qui officia deserunt  
            mollit anim id est laborum.  
        </p>  
        <p>  
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  
            commodo consequat.  
            <a id="info_bulle" class="info_bulle" href="#">InfoBulle CSS  
                <span class="info_bulle">  
                <span class="header">Détails sur l'infobulle</span>  
                <span class="content">  
                    Réalisation d'une infobulle uniquement avec du CSS.  
                </span>  
                <span class="footer"></span>  
                </span>  
            </a>  
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore  
            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in  
            culpa qui officia deserunt mollit anim id est laborum.  
        </p>  
        <p>  
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  
            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint  
            occaecat cupidatat non proident, sunt in culpa qui officia deserunt  
            mollit anim id est laborum.  
        </p>  
    </body>  
</html>

p  
{  
    font-size:1.1em; /* Définition de la taille de la police de nos paragraphes */  
}  
a.info_bulle  
{  
    color:#2F368A;  
    text-decoration:none;  
    padding:2px 16px 2px 2px; /*Définition des marges intérieures de notre lien */  
    /* Définition de l'arrière plan de notre lien */  
    background:transparent url('comment.gif') no-repeat right center;  
    position:relative; /* Indispensable pour le bon positionnement de l'info-bulle */  
}  
a.info_bulle:hover  
{  
    border:0; /* ligne qui corrige le bug d'IE6 et inférieur */  
}  
/* Rend invisible tout notre bloc span */  
a.info_bulle span.info_bulle  
{  
    position:absolute;  
    top:-2000em;  
    left:-2000em;  
    width:1px;  
    height:1px;  
    overflow:hidden;  
}  
/* Rend visible tout notre bloc span et lui attribue une taille */  
a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle, a.info_bulle:active  
span.info_bulle  
{  
    top:auto;  
    left:auto;  
    width:220px;  
    height:auto;  
    overflow:visible;  
}  
span.header  
{  
    display:block;  
    height:35px; /* Hauteur correspondant à celle de notre image */  
    line-height:220%; /* Propriété qui centrera le texte verticalement */  
    text-align:center;  
    background:transparent url('./top.gif') no-repeat 0 0;  
    font-size:15px;  
    font-weight:bold;  
}  
span.content  
{  
    display:block;  
    background:transparent url('./centre.gif') repeat-y;  
    padding:0 8px;  
}  
span.footer  
{  
    display:block;  
    height:5px;  
    background:url('./bot.gif') no-repeat bottom left;  
    font-size:0; /* Corrige l'espacement inutile sous IE */  
}

Visualisation de notre info-bulle dans un texte.

Conclusion

Actuellement, notre code ne permet pas un référencement optimal. Pour y remedier, nous pouvons, éventuellement, remplacer notre élément  par un autre plus approprié en fonction du contexte (citation <q>, définition <dfn>, etc.).

Aussi, nous pouvons adapter ce code afin de pouvoir ajouter n'importe quelles balises enfants valides, par exemple en remplaçant le texte par une image ou un champ texte.

Remerciements

Tous mes remerciements à Bastien pour la réalisation de l'image servant d'arrière-plan à l'info-bulle.

Dernière mise à jour : 28 févr. 2011 à 02:14

Rodrigue Hunel