Info-bulle CSS
Dans cet article, nous présentons comment créer des info-bulles à l'aide de HTML et CSS.
L'info-bulle est déclenchée lorsque la souris survole l'élément spécifié. Regardez d'abord les quatre exemples suivants :
|
Affichage en hautTexte de l'info-bulle
|
Affichage à droiteTexte de l'info-bulle
|
Affichage en basTexte de l'info-bulle
|
Affichage à gaucheTexte de l'info-bulle
|
Info-bulle de base
L'info-bulle s'affiche lorsque la souris survole l'élément spécifié :
Code HTML :
Essayez-le vous-même »
Analyse de l'exemple
HTML)Utilisez un élément conteneur (comme <div>) et ajoutez"tooltip"classe. Lorsque la souris passe sur le <div>, les informations de l'info-bulle sont affichées.
Placez le texte de l'info-bulle dans un élément en ligne (comme <span>) et utilisezclass="tooltiptext"。
CSS)tooltipUtilisation de la classeposition:relative, le texte de l'info-bulle doit être défini avec une valeur de positionnement.position:absolute。 Remarque :Les exemples suivants montreront plus d'effets de positionnement.
tooltiptextclasse pour le texte réel de l'info-bulle. Il est masqué par défaut et s'affiche lorsque la souris passe sur l'élément. Certains styles tels que la largeur, la couleur d'arrière-plan, la couleur de police, etc. sont définis.
CSS3 border-radiusLa propriété est utilisée pour ajouter des coins arrondis à l'info-bulle.
:hoverLe sélecteur est utilisé pour afficher l'info-bulle lorsque la souris passe sur l'élément spécifié <div>.
Info-bulle de positionnement
Dans l'exemple suivant, l'info-bulle est affichée sur le côté droit de l'élément spécifié (left:105%) 。
Remarquetop:-5pxC'est la même chose qu'un positionnement au centre de l'élément conteneur. Utilisez le nombre5Car le padding supérieur et inférieur du texte de l'info-bulle est de 5px.
Si vous modifiez la valeur du padding, la valeur top doit également être modifiée en conséquence, afin de garantir un alignement centré.
Le même principe s'applique lorsque l'infobulle est affichée sur le côté gauche.
Si vous souhaitez que l'infobulle soit affichée en haut et en bas, nous devons utiliser la propriétémargin-leftet la définir sur -60px. Ce nombre est calculé en utilisant la moitié de la largeur pour centrer, c'est-à-dire width/2 (120/2 = 60).
Affichage en haut :
Essayez-le vous-même »
Affichage en bas :
Essayez-le vous-même »
Ajouter une flèche
Nous pouvons utiliser le pseudo-élément CSS ::after et la propriété content pour créer une petite flèche pour l'info-bulle. La flèche est composée de bordures, mais une fois combinées, l'info-bulle ressemble à une bulle de dialogue.
L'exemple suivant montre comment ajouter une flèche inférieure à une info-bulle affichée en haut :
Info-bulle en haut / flèche en bas :
Essayez-le vous-même »
Analyse de l'exemple
Positionnez la flèche à l'intérieur de l'info-bulle :top: 100%, la flèche sera affichée en bas de l'info-bulle.left: 50%Utilisé pour centrer la flèche.
Remarque :border-widthLa propriété spécifie la taille de la flèche. Si vous la modifiez, vous devez également modifier la valeurmargin-left. De cette façon, la flèche peut être centrée.
border-colorUtilisé pour convertir le contenu en flèche. Définissez la bordure supérieure sur black, et les autres sur transparent. Si les autres sont également définies sur black, cela s'affichera comme un quadrilatère noir.
L'exemple suivant montre comment ajouter une flèche en haut de l'info-bulle. Notez les paramètres de couleur de bordure :
Info-bulle en bas / flèche en haut :
Essayez-le vous-même »
Les deux exemples suivants montrent des flèches pour les côtés gauche et droit :
Info-bulle à droite / flèche à gauche :
Essayez-le vous-même »
Info-bulle à gauche / flèche à droite :
Essayez-le vous-même »
Effet de fondu d'apparition
Nous pouvons utiliser la propriété transition de CSS3 et la propriété opacity pour obtenir un effet de fondu d'apparition pour l'infobulle :
Effet de fondu d'apparition :
Essayez-le vous-même »
Plus d’exemples
Belle infobulle CSS
autres extensions