Info-bulle CSS
Créez des info-bulles avec CSS.
Démo : exemples d’info-bulles
Une info-bulle 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éez une info-bulle qui apparaît lorsque l’utilisateur passe la souris sur un élément :
Exemple
/* Conteneur d’infobulles */
.info-bulle {
position : relative ;
affichage : bloc en ligne ;
bordure inférieure : 1 pixel en pointillé noir ; /* Si vous voulez des points sous le texte survolable */
}
/* Texte de l’info-bulle */
.tooltip .tooltiptext {
visibilité : masquée ;
largeur : 120 pixels ;
couleur de fond : noir ;
couleur : #fff ;
aligner le texte : centrer ;
rembourrage : 5px 0 ;
rayon de bordure : 6 px ;
/* Positionne le texte de l’info-bulle – voir les exemples ci-dessous ! */
position : absolue ;
indice z : 1 ;
}
/* Afficher le texte de l’info-bulle lorsque vous passez la souris sur le conteneur d’info-bulle */
.tooltip:hover .tooltiptext {
visibilité : visible ;
}
Survolez-moi
Texte d’info-bulle
Essayez-le vous-même »
Exemple expliqué
HTML : Utilisez un élément conteneur (comme
"tooltip" classe à cela. Lorsque l’utilisateur passe la souris sur ce
Le texte de l’info-bulle est placé à l’intérieur d’un élément en ligne (comme ) avec class="tooltiptext".
CSS : Le tooltip utilisation en classe position:relativenécessaire pour positionner le texte de l’info-bulle (position:absolute).
Note: Voir les exemples ci-dessous sur la façon de positionner l’info-bulle.
Le tooltiptext classe contient le texte réel de l’info-bulle. Il est masqué par défaut et sera visible au survol (voir ci-dessous). Nous y avons également ajouté quelques styles de base : largeur de 120 px, couleur d’arrière-plan noire, couleur de texte blanche, texte centré et rembourrage supérieur et inférieur de 5 px.
Le CSS border-radius La propriété est utilisée pour ajouter des coins arrondis au texte de l’info-bulle.
Le :hover Le sélecteur est utilisé pour afficher le texte de l’info-bulle lorsque l’utilisateur déplace la souris sur le
class="tooltip".
Info-bulles de positionnement
Dans cet exemple, l’info-bulle est placée à droite (left:105%) du texte “survolable” (
top:-5px est utilisé pour le placer au milieu de son élément conteneur. Nous utilisons le nombre 5 car le texte de l’info-bulle a un rembourrage supérieur et inférieur de 5 pixels. Si vous augmentez son rembourrage, augmentez également la valeur de top propriété pour s’assurer qu’elle reste au milieu (si c’est quelque chose que vous voulez). Il en va de même si vous souhaitez que l’info-bulle soit placée à gauche.
Info-bulle de droite
.tooltip .tooltiptext {
haut : -5px ;
gauche : 105 % ;
}
Résultat:
Survolez-moi
Texte d’info-bulle
Essayez-le vous-même »
Info-bulle de gauche
.tooltip .tooltiptext {
haut : -5px ;
droite : 105 % ;
}
Résultat:
Survolez-moi
Texte d’info-bulle
Essayez-le vous-même »
Si vous souhaitez que l’info-bulle apparaisse en haut ou en bas, consultez les exemples ci-dessous. Notez que nous utilisons le margin-left propriété avec une valeur de moins 60 pixels. Cela permet de centrer l’info-bulle au-dessus/en dessous du texte survolable. Il est défini sur la moitié de la largeur de l’info-bulle (120/2 = 60).
Info-bulle supérieure
.tooltip .tooltiptext {
largeur : 120 pixels ;
bas : 100 % ;
gauche : 50 % ;
marge gauche : -60px ; /* Utiliser la moitié de la largeur (120/2 = 60), pour centrer l’infobulle */
}
Résultat:
Survolez-moi
Texte d’info-bulle
Essayez-le vous-même »
Info-bulle du bas
.tooltip .tooltiptext {
largeur : 120 pixels ;
Top 100%;
gauche : 50 % ;
marge gauche : -60px ; /* Utiliser la moitié de la largeur (120/2 = 60), pour centrer l’infobulle */
}
Résultat:
Survolez-moi
Texte d’info-bulle
Essayez-le vous-même »
Flèches d’info-bulle
Pour créer une flèche qui doit apparaître d’un côté spécifique de l’info-bulle, ajoutez un contenu “vide” après l’info-bulle, avec la classe de pseudo-élément ::after avec la content
propriété. La flèche elle-même est créée à l’aide de bordures. Cela fera ressembler l’info-bulle à une bulle de dialogue.
Cet exemple montre comment ajouter une flèche au bas de l’info-bulle :
Flèche du bas
.tooltip .tooltiptext :: après {
contenu: ” “;
position : absolue ;
Top 100%; /* En bas de l’infobulle */
gauche : 50 % ;
marge gauche : -5px ;
largeur de bordure : 5 px ;
style de bordure : solide ;
border-color : noir transparent transparent transparent ;
}
Résultat:
Survolez-moi
Texte d’info-bulle
Essayez-le vous-même »
Exemple expliqué
Positionnez la flèche à l’intérieur de l’info-bulle : top: 100% placera la flèche au bas de l’info-bulle. left: 50% centrera la flèche.
Note: Le border-width La propriété spécifie la taille de la flèche. Si vous modifiez cela, modifiez également le margin-left valeur au même. Cela gardera la flèche centrée.
Le border-color est utilisé pour transformer le contenu en une 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 montre comment ajouter une flèche en haut de l’info-bulle. Notez que nous définissons la couleur de la bordure inférieure cette fois :
Flèche du haut
.tooltip .tooltiptext :: après {
contenu: ” “;
position : absolue ;
bas : 100 % ; /* En haut de l’info-bulle */
gauche : 50 % ;
marge gauche : -5px ;
largeur de bordure : 5 px ;
style de bordure : solide ;
border-color : transparent transparent noir transparent ;
}
Résultat:
Survolez-moi
Texte d’info-bulle
Essayez-le vous-même »
Cet exemple montre comment ajouter une flèche à gauche de l’info-bulle :
Flèche gauche
.tooltip .tooltiptext :: après {
contenu: ” “;
position : absolue ;
haut : 50 % ;
droite : 100 % ; /* A gauche de l’infobulle */
marge supérieure : -5 px ;
largeur de bordure : 5 px ;
style de bordure : solide ;
border-color : transparent noir transparent transparent ;
}
Résultat:
Survolez-moi
Texte d’info-bulle
Essayez-le vous-même »
Cet exemple montre comment ajouter une flèche à droite de l’info-bulle :
Flèche droite
.tooltip .tooltiptext :: après {
contenu: ” “;
position : absolue ;
haut : 50 % ;
gauche : 100 % ; /* A droite de l’infobulle */
marge supérieure : -5 px ;
largeur de bordure : 5 px ;
style de bordure : solide ;
border-color : transparent transparent transparent noir ;
}
Résultat:
Survolez-moi
Texte d’info-bulle
Essayez-le vous-même »
Fondu dans les info-bulles (animation)
Si vous souhaitez faire disparaître le texte de l’info-bulle lorsqu’il est sur le point d’être visible, vous pouvez utiliser le CSS transition propriété avec le opacity
propriété, et passer de totalement invisible à 100% visible, en un certain nombre de secondes (1 seconde dans notre exemple) :
Exemple
.tooltip .tooltiptext {
opacité : 0 ;
transition : opacité 1s ;
}
.tooltip:hover .tooltiptext {
opacité : 1 ;
}
Essayez-le vous-même »
#Infobulle #CSS