Créer sa propre info-bulle en CSS

Date de publication : 03/06/2008 , Date de mise à jour : 06/04/2009

Par Rodrigue Hunel (Rodrigue Online)
 

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

               Version PDF (Miroir)   Version hors-ligne (Miroir)

I. Introduction
II. Info-bulle avec fond coloré
II-A. Partie (X)HTML
II-B. Partie CSS
II-C. Exemple d'utilisation
III. Info-bulle avec fond imagé
III-A. Partie (X)HTML
III-B. Partie CSS
III-C. Exemple d'utilisation
IV. Conclusion
V. Remerciements


I. 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.

warning 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.

II. 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é
Info-bulle avec fond coloré

II-A. Partie (X)HTML

Nous utiliserons, ici, un élément de type span, pour ajouter notre texte. On pourra donc avoir un code du style :
Code (X)HTML de notre bulle d'information textuelle

<a class="info_bulle" href="http://developpez.com">
  Developpez.com
  <span>
    www.developpez.com est la communauté en langue française qui concentre le
    plus de développeurs professionnels avec plus de 130 000 visites par jour.
  </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 <span> est de type inline (c'est-à-dire que son positionnement se fait sur la même ligne).

warning 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.
info Pour le moment, nous n'avons pas encore notre info-bulle. Voir le résultat en ligne.

II-B. 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.
Code CSS rendant invisible notre texte

/* 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 */
}
info 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.
Code CSS de personnalisation de notre lien

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.
Code CSS d'affichage de notre info-bulle

/* 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 :
Code CSS qui corrige le bug d'IE6

a.info_bulle:hover 
{
  border : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
}
warning 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.
Code CSS pour le bon positionnement de notre info-bulle

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

II-C. 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 d'exemple d'utilisation 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>	
	<h3>Exemple d'info-bulle textuelle dans un paragraphe</h3>
    <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="http://www.developpez.com/">developpez.com
           <span>
              www.developez.com est la communauté en langue française qui concentre le
              plus de développeurs professionnels avec plus de 130 000 visites par jour.
           </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 de notre info-bulle

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;
}
info Visualisation de notre info-bulle dans un environnement textuel.

III. 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
Info-bulle avec image comme arrière plan

III-A. 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.
Code (X)HTML de notre info-bulle

<a class="info_bulle" href="http://developpez.com">
  Developpez.com
  <span class="info_bulle">
    <span class="header"></span>
    <span class="content">
      www.developez.com est la communauté en langue française qui concentre le
      plus de développeurs professionnels avec plus de 130 000 visites par jour.
    </span>
    <span class="footer"></span>
  </span>
</a>
info On remarque l'apparition de trois nouvelles balises <span>. 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 <span>. 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.

III-B. 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 ;
Code CSS de notre header

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 ;
Code CSS de notre content

span.content
{
   display     : block; 
   background  : transparent url('./centre.gif') repeat-y;
   padding     : 0 8px;
}
info 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.
Code CSS de notre footer

span.footer
{
   display     : block; 
   height      : 5px; 
   background  : url('./bot.gif') no-repeat bottom left; 
   font-size   : 0; /* Corrige l'espacement inutile sous IE */
}
warning 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 <span> 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 :
Code CSS de notre info-bulle

/* 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;
}
info On obtient, enfin, notre nouvelle info-bulle : voir le résultat

III-C. 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.
Code (X)HTML d'exemple d'utilisation 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>	
	<h3>Exemple d'info-bulle textuelle dans un paragraphe</h3>
    <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="http://www.developpez.com/">developpez.com
            <span class="info_bulle">
               <span class="header">Détails sur developpez.com</span>
               <span class="content">
                  www.developez.com est la communauté en langue française qui concentre 
                  le plus de développeurs professionnels avec plus de 130 000 visites par jour. 
               </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>
Code CSS de notre info-bulle

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 */
}
info Visualisation de notre info-bulle dans un texte.

IV. Conclusion

Actuellement, notre code ne permet pas un référencement optimal. Pour y remedier, nous pouvons, éventuellement, remplacer notre élément <span> 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.

info Pour rappel : liste des balises enfants de <a>

V. Remerciements

Tous mes remerciements à Bastien pour la réalisation de l'image servant d'arrière-plan à l'info-bulle, à Erwan31 pour ses précieux conseils et à olsimare pour sa relecture.



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Copyright © 2008 Rodrigue Hunel. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.

Vos questions techniques : forum d'entraide CSS - Publiez vos articles, tutoriels et cours
et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones
Nous contacter - Hébergement - Participez - Copyright © 2000-2010 www.developpez.com - Legal informations.