Créer des info-bulles avec CSS.
Démo : Exemples d’infobulles
Une infobulle est souvent utilisée pour spécifier des informations supplémentaires sur quelque chose lorsque l’utilisateur déplace le pointeur de la souris sur un élément :
Info-bulle de base
Créer une info-bulle qui apparaît lorsque l’utilisateur déplace la souris sur un élément :
Exemple expliqué
Le texte de l’infobulle est placé à l’intérieur d’un élément en ligne (comme <span>) avec class="tooltiptext".
CSS : La classe tooltip utilise position:relative, qui est nécessaire pour positionner le texte de l’infobulle (position:absolute).Remarque : voir les exemples ci-dessous sur la façon de positionner l’infobulle.
La classe tooltiptext contient le texte réel de l’infobulle. Il est masqué par défaut, et sera visible au survol (voir ci-dessous). Nous lui avons également ajouté quelques styles de base : 120px de largeur, couleur de fond noire, couleur de texte blanche, texte centré et 5px de rembourrage en haut et en bas.
La propriété CSS border-radius est utilisée pour ajouter des coins arrondis au texte de l’infobulle.
Le sélecteur :hover est utilisé pour afficher le texte de l’infobulle lorsque l’utilisateur déplace la souris sur le <div> avec class="tooltip".
Positionnement des infobulles
Dans cet exemple, l’infobulle est placée à droite (left:105%) du texte » survolable » (<div>). Notez également que top:-5px est utilisé pour le placer au milieu de son élément conteneur. Nous utilisons le chiffre 5 car le texte de l’infobulle a un padding supérieur et inférieur de 5px. Si vous augmentez son padding, augmentez également la valeur de la propriété top pour vous assurer qu’il reste au milieu (si c’est ce que vous voulez). Il en va de même si vous souhaitez que l’info-bulle soit placée à gauche.
Info-bulle droite
top : -5px;
left : 105% ;
}
Résultat:
Essayez vous-même »
Info-bulle gauche
top : -5px;
right : 105% ;
}
Résultat:
Essayez vous-même »
Si vous voulez que l’infobulle apparaisse en haut ou en bas, voir les exemples ci-dessous. Notez que nous utilisons la propriété margin-left avec une valeur de moins 60 pixels. Cela permet de centrer l’infobulle au-dessus/en dessous du texte survolable. Il est défini à la moitié de la largeur de l’infobulle (120/2 = 60).
Flèches d’infobulle
Pour créer une flèche qui doit apparaître d’un côté spécifique de l’infobulle, ajoutez un contenu « vide » après l’infobulle, avec la classe de pseudo-élément ::after conjointement avec la propriété content. La flèche elle-même est créée à l’aide de bordures. Ainsi, l’infobulle ressemblera à une bulle de parole.
Cet exemple démontre comment ajouter une flèche au bas de l’infobulle :
Exemple expliqué
Positionner la flèche à l’intérieur de l’infobulle : top: 100% placera la flèche au bas de l’infobulle. left: 50% centrera la flèche.
Note : La propriété border-width spécifie la taille de la flèche. Si vous la modifiez, changez également la valeur de margin-left pour la même. Cela permettra de garder la flèche centrée.
La border-color est utilisée pour transformer le contenu en flèche. Nous définissons la bordure supérieure en noir, et le reste en transparent. Si tous les côtés étaient noirs, vous vous retrouveriez avec une boîte carrée noire.
Cet exemple démontre comment ajouter une flèche au sommet de l’infobulle. Remarquez que nous avons défini la couleur de la bordure inférieure cette fois-ci :
Cet exemple démontre comment ajouter une flèche à la gauche de l’infobulle :
Cet exemple démontre comment ajouter une flèche à la droite de l’infobulle :
Fade In Tooltips (Animation)
Si vous voulez faire apparaître en fondu le texte de l’infobulle lorsqu’il est sur le point d’être visible, vous pouvez utiliser la propriété CSS transition conjointement avec la propriété opacity, et passer d’un état complètement invisible à un état 100% visible, en un nombre de secondes spécifié (1 seconde dans notre exemple) :
.