[CSS] Info-bulles en CSS sans Javascript

Une info-bulle est un texte qui s'affiche généralement lorsqu'on survole un élément de la page.
Cela permet d'ajouter des petits textes d'aide ou d'information.

On les utilise par exemple sur les liens : pour voir une info-bulle, survolez ce texte.

L'info-bulle ci-dessus est écrite dans l'attribut title du lien.
Il n'est pas spécifié dans la norme que cet attribut doit être affiché sous forme d'info-bulle mais c'est généralement le cas dans la plupart des navigateurs.
Cependant c'est très limité, on ne peut pas faire grand chose de plus que d'afficher un texte non formaté, et il faut passer en éditeur de code source pour ajouter l'attribut.

Vous avez peut-être déjà lu la possibilité d'ajouter des info-bulles plus évoluées en utilisant Help.bubble (par exemple ici) mais cela nécessite l'activation de Javascript pour votre compte.

Nous allons dans cet article mettre en place des info-bulles uniquement avec du code CSS, donc utilisables sur tous les blogs.

Encore plus intéressant, il sera possible d'ajouter des info-bulles sans même aller dans le code source HTML !

 Un petit exemple :

Voici une première info-bulle_{Ceci est une info-bulle
sur deux lignes} suivie d'une deuxième info-bulle_{Et voici une autre information avec du gras !}.
Survolez les textes ci-dessus en bleu sur fond jaune pour voir apparaître des informations.

Ces info-bulles ont quelques limitations et inconvénients :

• la détection d'un texte avec info-bulle se fait sur l'adresse cible (Url) du lien.
  Il n'est donc pas possible de mettre une info-bulle sur un lien pour lequel on souhaite une navigation vers une autre page. Le clic sur un lien info-bulle n'aura aucun effet.
• Si on clique sur le lien, la page avec l'ancre #mabulle est ajoutée à l'historique de navigation.
• l'info-bulle peut déborder en dehors de l'écran si le texte est trop à droite ou en bas.
  Mais ce n'est pas très gênant, habituellement on survole des éléments qui ne sont pas en bordure d'écran.
• on ne peut pas mettre du texte en indice dans l'info-bulle (en petit en bas).
  Cela non plus ne devrait pas être un gros soucis.

 En contrepartie, il est possible de les mettre en place même si vous n'avez pas activé le Javascript pour votre profil.

 Commencez par ajouter à votre blog le code CSS nécessaire.

On verra plus bas comment ce code fonctionne et comment le personnaliser.

Le code CSS doit être ajouté dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».

Copiez-collez le code affiché ci-dessous dans la fenêtre d'édition CSS (à l'emplacement du cadre jaune montré ci-dessus), puis cliquez sur le bouton « Appliquer et Sauvegarder ».

/* Début CSS info-bulles */
a[href="#mabulle"]  		/* texte du lien */
{
text-decoration:none; 		/* pas de soulignement */
background-color:#FFFFAA; 	/* couleur surlignée */
color:darkblue; 		/* couleur du texte */
}
a[href="#mabulle"]:hover	/* texte du lien survolé */
{
    cursor:help;		/* curseur souris */
}

a[href="#mabulle"] + sub 	/* texte d'info en indice après le lien */
{  
bottom:auto; 			/* Corrige le positionnement du sub */
line-height:inherit; 		/* Corrige la taille de ligne du sub */
display:none;			/* pas d'affichage avant le survol */
position:absolute;		/* position absolue pour que la bulle soit positionnée hors du texte */
font-size:inherit;		/* hérite de la taille du texte du lien */
color:darkblue;			/* couleur du texte d'info */
text-align:justify;		/* alignement du texte justifié */
-moz-border-radius:10px;	/* bordure arrondie 10px de rayon */
-webkit-border-radius:10px;
border-radius:10px;
margin:10px 10px;		/* marge extérieure haut et gauche, décale l'info-bulle vers le bas et à droite */
padding:10px;			/* marge intérieure de 10px */
padding-left:50px;		/* marge intérieure gauche de 50px pour laisser de la place à l'image */
border:1px solid #0000AA;	/* taille, style et couleur de la bordure */
/* fond de la bulle : image non répétée décalée de 5px à droite, centrée verticalement, avec un fond de couleur #ddd */ 
background:#ddd url(https://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 5px center;
}
a[href="#mabulle"]:hover + sub  	/* texte en indice sur survol du lien */
{
display: inline;		/* affichage de la bulle */
}
/* Fin CSS info-bulles */

Cette opération n'est à faire qu'une seule fois pour tout le blog.

 Vous voilà prêt à ajouter une info-bulle !

Passez en premier lieu en édition sur un article.

Notez que l'info-bulle ne fonctionne que sur un lien hypertexte.

Ajoutez donc un lien en cliquant sur le bouton « Insérer/éditer un lien ».

- Dans « Url », inscrivez #mabulle.

Il est important de mettre exactement cette Url, car celle-ci à deux rôles :

1. Elle permet de détecter les liens qui doivent être traités comme des info-bulles (on retrouve cette Url dans le CSS).
2. Elle évite de naviguer dans la page lorsqu'on clique sur le lien (pour peu que vous n'ayez pas d'ancre nommée ainsi sur la page).

- Dans « Texte à afficher », écrivez le texte qui sera affiché sur l'article (celui qui sera survolé).

Ajoutez ensuite du texte juste après le lien :

Sélectionnez ce texte qui doit être placé dans l'info-bulle et mettez le en indice :

La mise en indice se fait en passant d'abord l'éditeur en mode « Expert ».

La mise en indice du texte permet de le détecter avec le CSS, c'est le rôle du sélecteur sub.

Il est alors possible d'écrire la suite du texte, en cliquant si besoin à nouveau sur le bouton « Indice » pour revenir en texte normal.

Dans l'éditeur, on ne voit pas les info-bulles. On voit le texte d'information en indice, ce qui nous permet de le modifier.

 Dans votre article en ligne, vous devriez obtenir ceci : Survolez pour info_{Ceci est un texte d'information} et voici la suite du texte.

 Notez que pour l'exemple, si vous survolez le lien ci-dessus, j'ai ajouté du texte rouge en gras. Il est en effet possible de mettre du formatage dans le contenu.
Par contre on ne peut pas mettre du texte en indice car tout le contenu y est déjà...

 A partir d'ici nous allons un peu étudier le code pour pouvoir l'adapter :

• modifier les couleurs ;
• aligner le texte ;
• changer ou retirer l'image...

Le code CSS se divise en quatre parties :

1. Le style du lien (pour modifier le style par défaut des liens).
2. Le style du lien survolé.
3. Le style de l'info-bulle (texte, fond, bordure...)
4. Le style de l'info-bulle lorsque le lien est survolé (en fait juste une demande d'affichage).

Dans le code vous trouvez :

• en bleu : des sélecteurs qui pécisent quels éléments sont ciblés ;
• en noir : des noms de paramètres de style ;
• en rouge : les valeurs de ces paramètres ;
• en vert : des commentaires.

Première partie : le style du lien.

a[href="#mabulle"]  		/* texte du lien */
{
text-decoration:none; 		/* pas de soulignement */
background-color:#FFFFAA; 	/* couleur surlignée */
color:darkblue; 		/* couleur du texte */
}

On détecte les liens « info-bulle » avec l'Url #mabulle.
Cette Url se retrouve dans le code HTML en attribut href du lien.
Le lien est un élément nommé a, l'attribut href est défini entre crochets.

Le style entre accolades s'appliquera donc au texte des liens dont l'Url est #mabulle.

• text-decoration avec la valeur none permet de ne pas avoir le caractère de soulignement du lien ;
• background-color définit la couleur de fond du texte : #FFAAAA est une couleur jaune ;
• color définit la couleur du texte : darkblue est un code couleur pour du bleu foncé.

Recherchez sur internet « code couleurs HTML » par exemple, vous trouverez de nombreuses informations sur la codification des couleurs.

Deuxième partie : le style du lien survolé.

a[href="#mabulle"]:hover	/* texte du lien survolé */
{
    cursor:help;		/* curseur souris */
}

On ajoute le selecteur :hover qui signifie « survolé ».

Le style entre accolades s'appliquera donc au texte des liens survolés dont l'Url est #mabulle.

• cursor avec la valeur help permet de modifier le curseur de la souris en un curseur d'aide (flèche + point d'interrogation) ;
  Par défaut le curseur est une main. Si vous souhaitez ne pas modifier ce curseur, retirez le code.

Vous trouverez tous les curseurs disponibles sur ce lien : CSS cursor property.

Troisième partie : le style de l'info-bulle.

a[href="#mabulle"] + sub 	/* texte d'info en indice après le lien */
{  
bottom:auto; 			/* Corrige le positionnement du sub */
line-height:inherit; 		/* Corrige la taille de ligne du sub */
display:none;			/* pas d'affichage avant le survol */
position:absolute;		/* position absolue pour que la bulle soit positionnée hors du texte */
font-size:inherit;		/* hérite de la taille du texte du lien */
color:darkblue;			/* couleur du texte d'info */
text-align:justify;		/* alignement du texte justifié */
-moz-border-radius:10px;	/* bordure arrondie 10px de rayon */
-webkit-border-radius:10px;
border-radius:10px;
margin:10px 10px;		/* marge extérieure haut et gauche, décale l'info-bulle vers le bas et à droite */
padding:10px;			/* marge intérieure de 10px */
padding-left:50px;		/* marge intérieure gauche de 50px pour laisser de la place à l'image */
border:1px solid #0000AA;	/* taille, style et couleur de la bordure */
/* fond de la bulle : image non répétée décalée de 5px à droite, centrée verticalement, avec un fond de couleur #ddd */ 
background:#ddd url(https://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 5px center;
}

On ajoute le selecteur + sub qui signifie « le texte en indice qui suit le lien ».

Le style entre accolades s'appliquera donc au texte en indice qui suit les liens dont l'Url est #mabulle.

• bottom et line-height corrige le positionnement du texte initialement prévu pour être en en indice ;
• display avec la valeur none permet de masquer totalement le texte en indice ; on l'affichera ensuite au survol du lien dans la quatrième partie ;
• position avec la valeur absolute définit que ce texte sera affiché, non pas dans le flux de texte classique, mais « par dessus » le reste ;

Ces deux premiers paramètres de style ne doivent pas être modifiés pour le bon fonctionnement de l'info-bulle.
Les paramètres suivants peuvent être changés.

• font-size avec la valeur inherit précise que la taille du texte de la bulle doit être la même que celle du texte du lien  ;
  Il est possible de préciser une taille en pixels (10 px) ou en unités em (1.5em);
  L'unité em est la taille par défaut d'un caractère ; 1.5em signifie donc « une fois-et-demi la taille par défaut ».
• color avec la valeur darkblue définit une couleur de texte bleu foncé ;
• text-align avec la valeur 10px définit un alignement justifé ;
  Vous pouvez modifier la valeur pour left (gauche), right (droite) ou center (centré).
• border-radius avec la valeur justify définit une bordure arrondie ;
  Vous pouvez modifier la valeur pour ajuster le rayon de l'arrondi.
  Notez que ce paramètre est répété 3 fois avec différents préfixes pour assurer une compatibilité avec la plupart des navigateurs (mais sur certains navigateurs anciens cela ne fonctionne pas).
• margin avec la valeur 10px 10px définit la marge extérieure de la bulle (10px à en haut et 10px à droite) ;
  Vous pouvez modifier les valeurs pour positionner l'info-bulle par rapport au texte survolé ;
• padding avec la valeur 10px définit la marge intérieure de la bulle (10px à en haut, à droite, en bas et à gauche) ;
  Vous pouvez modifier la valeur pour laisser plus d'espace autour du texte ;
• padding-left avec la valeur 50px définit la marge intérieure gauche de la bulle (annule et remplace la marge gauche définie juste avant), pour laisser de la place à l'image définie ensuite ;
  Si vous ne placez pas d'image de fond, vous pouvez retirer cette ligne. ;
• border avec la valeur 1px solid #0000AA définit une bordure de taille 1px, de type continu (solid) et de couleur #0000AA (couleur bleue) ;
  Si vous ne souhaitez pas de bordure, vous pouvez retirer cette ligne. ;
• background avec la valeur #ddd url(https://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 5px center définit un fond de couleur #ddd (gris), avec une image dont l'adresse est la valeur dans url(). L'image ne se répète pas (no-repeat), est positionnée à 5px horizontalement et centrée verticalement (center)  ;
  Modifiez l'url pour mettre celle votre image, que vous aurez ajoutée dans « Contenu » => « Gérer les fichiers ».
  Ouvrez l'image après l'avoir ajoutée pour voir son adresse.
  Si vous ne souhaitez pas d'image de fond, vous pouvez retirer cette ligne, ainsi que la marge intérieure gauche (padding-left). ;

Quatrième partie : le style de l'info-bulle lorsque le lien est survolé.

a[href="#mabulle"]:hover + sub  	/* texte en indice sur survol du lien */
{
display: inline;		/* affichage de la bulle */
}
/* Fin CSS info-bulles */

On ajoute le selecteur :hover qui signifie « survolé ».

Lorsque le texte est survolé, on définit la propriété display à inline,ce qui a pour effet d'afficher la bulle.

Si la souris quitte le texte, la bulle est masquée (le style de la bulle sans survol est réappliqué).

 Et si on souhaite avoir plusieurs styles d'info-bulles ?

Il suffit de définir plusieurs Url, par exemple #mabulleinfo et #mabullewarning.

On place d'abord les styles communs à toutes les info-bulles dans des code CSS dont le sélecteur sera par exemple : a[href="#mabulleinfo"], a[href="#mabullewarning"]

Ensuite on place le code spécifique à chaque info-bulle avec un sélecteur qui cible l'Url de chaque info-bulle.

Ce qui nous donne :

/* Début CSS info-bulles multiples */ 
/* Styles commun à toutees les info-bulles */ 
a[href="#mabulleinfo"], a[href="#mabullewarning"]  			/* texte du lien */ 
{ 
text-decoration:none; 		/* pas de soulignement */ 
color:darkblue; 		/* couleur du texte */ 
} 
a[href="#mabulleinfo"]:hover, a[href="#mabullewarning"]:hover		/* texte du lien survolé */ 
{ 
    cursor:help;			/* curseur souris */ 
} 
a[href="#mabulleinfo"] + sub, a[href="#mabullewarning"] + sub 		/* texte d'info en indice après le lien */ 
{  
bottom:auto; 			/* Corrige le positionnement du sub */
line-height:inherit; 		/* Corrige la taille de ligne du sub */
display:none;				/* pas d'affichage avant le survol */ 
position:absolute;			/* position absolue pour que la bulle soit positionnée hors du texte */ 
font-size:inherit;		/* hérite de la taille du texte du lien */ 
color:darkblue;			/* couleur du texte d'info */ 
text-align:justify;			/* alignement du texte justifié */ 
-moz-border-radius:10px;		/* bordure arrondie 10px de rayon */ 
-webkit-border-radius:10px; 
border-radius:10px; 
margin:10px 10px;		/* marge extérieure haut et gauche, décale l'info-bulle vers le bas et à droite */ 
padding:10px;				/* marge intérieure de 10px */ 
padding-left:50px;			/* marge intérieure gauche de 50px pour laisser de la place à l'image */ 
} 
a[href="#mabulleinfo"]:hover + sub, a[href="#mabullewarning"]:hover + sub  	/* texte en indice sur survol du lien */ 
{ 
    display: inline; 
} 
/* Styles spécifiques à chaque info-bulles */
a[href="#mabulleinfo"]  			/* texte du lien */ 
{ 
background-color:#FFFFAA; 		/* couleur surlignée */ 
} 
a[href="#mabullewarning"]  			/* texte du lien */ 
{ 
background-color:#FFAAAA; 		/* couleur surlignée */ 
} 
a[href="#mabulleinfo"] + sub 			/* texte d'info en indice après le lien */ 
{ 
border:1px solid #0000AA;	/* taille, style et couleur de la bordure */ 
/* fond de la bulle : image non répétée décalée de 5px à droite, centrée verticalement, avec un fond de couleur #ddd */ 
background:#ddd url(https://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 5px center; 
} 
a[href="#mabullewarning"] + sub 			/* texte d'info en indice après le lien */ 
{ 
border:1px solid #AA0000;		/* taille, style et couleur de la bordure */ 
/* fond de la bulle : image non répétée décalée de 5px à droite, centrée verticalement, avec un fond de couleur #daa */ 
background:#daa url(https://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/warning.png) no-repeat 5px center; 
} 
/* Fin CSS info-bulles multiples */

Et voici une information_{Ceci est une information} et un avertissement test_{Ceci est un avertissement}.