Tooltip CSS
- Page précédente Animations CSS
- Page suivante Style d'image CSS
Créez une infobulle (Tooltip) en utilisant CSS.
Exemple : Infobulle
Exemple
Lorsque l'utilisateur passe le curseur de la souris sur un élément, l'infobulle est généralement utilisée pour fournir des informations supplémentaires sur un contenu :
Infobulle de base
Créez une infobulle qui apparaît lorsque vous passez la souris sur un élément :
Exemple
<style>
/* Conteneur de l'infobulle */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Affiche une ligne pointillée en dessous du texte flottant si nécessaire */
}
/* Texte de l'infobulle */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Positionne le texte de l'infobulle - voir les exemples ci-dessous */
position: absolute;
z-index: 1;
}
/* Affiche le texte de l'infobulle lorsque le curseur de la souris est sur le conteneur de l'infobulle */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Surligne-moi</div>
<span class="tooltiptext">Text d'infobulle</span>
</div>
Exemple d'explication
HTML :
Utilisez l'élément conteneur (par exemple <div>) et ajoutez "tooltip" classe. Lorsque l'utilisateur place le curseur sur ce <div>, le texte de l'infobulle s'affiche.
Le texte de l'infobulle se trouve dans class="tooltiptext" des éléments en ligne intégrés (comme <span>).
CSS :
tooltip La classe utilise position:relative，pour placer le texte de l'infobulle (position:absolute）。Notez : pour savoir comment placer l'infobulle, voir les exemples ci-dessous.
tooltiptext La classe contient le texte réel de l'infobulle. Par défaut, elle est cachée et devient visible au survol de la souris (voir ci-dessous). Nous avons également ajouté quelques styles de base : une largeur de 120 pixels, un fond noir, un texte blanc, un texte centré et des marges internes supérieure et inférieure de 5px (padding).
CSS border-radius Attribut utilisé pour ajouter des arrondis aux textes de l'infobulle.
Lorsque l'utilisateur place le curseur sur le <div> avec la classe "tooltip",:hover Sélecteur utilisé pour afficher le texte de l'infobulle.
Positionner l'infobulle
Dans cet exemple, l'infobulle est à droite du texte "survolable" (left:105%）。En plus de cela, notez quetop:-5px Utilisé pour le centrer dans l'élément conteneur. Nous utilisons le nombre 5 car les marges internes supérieure et inférieure du texte de l'infobulle sont de 5px. Si vous augmentez les marges internes, n'oubliez pas d'augmenter également top La valeur de l'attribut, pour s'assurer qu'elle reste au centre. Cela s'applique également si vous souhaitez placer l'infobulle à gauche.
Infobulle de droite
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Résultat :
Infobulle de gauche
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Résultat :
Si vous souhaitez que l'infobulle soit en haut ou en bas, regardez l'exemple ci-dessous. Notez que nous avons utilisé une marge gauche extérieure de -60 pixels (margin-left). Cela permet de centrer l'infobulle avec le texte survolé. Cette valeur est la moitié de la largeur de l'infobulle (120/2 = 60).
Infobulle en haut
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Utilisez la moitié de la largeur (120/2 = 60) pour centrer l'infobulle */
}
Résultat :
Infobulle en bas
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Utilisez la moitié de la largeur (120/2 = 60) pour centrer l'infobulle */
}
Résultat :
Flèche de l'infobulle
Pour créer une flèche s'affichant du côté spécifié de l'infobulle, ajoutez du contenu "vide" après l'infobulle et utilisez la classe de pseudo-élément ::after et content attribut. La flèche elle-même est créée à l'aide des bordures. Cela rend l'infobulle semblable à une bulle.
Cet exemple montre comment ajouter une flèche en bas de l'infobulle :
flèche du bas
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Résultat :
Exemple d'explication
Positionnez l'arrow à l'intérieur de l'infobulle :top: 100% Placez l'arrow au bas de l'infobulle.left: 50% ce qui centrera l'arrow.
Attention :border-width l'attribut spécifie la taille de la flèche. Si vous changez ce réglage, n'oubliez pas également de modifier margin-left Changer la valeur en la même valeur. Cela centrera l'arrow.
border-color utilisé pour convertir le contenu en flèche. Nous définissons la bordure supérieure en noir et les autres en transparent. Si toutes les faces sont noires, le résultat final sera un rectangle noir.
Cet exemple montre comment ajouter une flèche en haut de l'infobulle. Notez que cette fois, nous avons défini la couleur de la bordure inférieure :
flèche du haut
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Résultat :
Cet exemple montre comment ajouter une flèche à gauche de l'infobulle :
flèche de gauche
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Résultat :
Cet exemple montre comment ajouter une flèche à droite de l'infobulle :
flèche de droite
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Résultat :
Infobulle en fondu (animation)
Si vous souhaitez que le texte de l'infobulle affichée soit visible ou invisible en fondu, vous pouvez utiliser CSS transition l'attribut avec opacity En combinaison avec l'attribut, et passe en un certain nombre de secondes (dans cet exemple, 1 seconde) de complètement invisible à 100% visible :
Exemple
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Page précédente Animations CSS
- Page suivante Style d'image CSS
