Créer des infobulles avec CSS.
Demo: Tooltip Exemples
Une info-bulle est souvent utilisé pour spécifier des informations supplémentaires à propos de quelque chose lorsque l'utilisateur déplace le pointeur de la souris sur un élément:
Tooltip Basic
Créer une infobulle qui apparaît lorsque l'utilisateur déplace la souris sur un élément:
Exemple
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip"> Hover
over me
<span class="tooltiptext"> Tooltip
text </span>
</div> Essayez - le vous - même » Exemple Explained
HTML) Utiliser un élément conteneur (comme <div> ) et ajouter le "tooltip" classe à elle. Lorsque l'utilisateur souris sur ce <div> , il affiche le texte de l' infobulle.
Le texte de l' infobulle est placé à l' intérieur d' un élément en ligne (comme <span> ) avec class="tooltiptext" .
CSS) L' tooltip classe utilisation position:relative , qui est nécessaire pour positionner le texte de l' infobulle ( position:absolute .) Note: Voir les exemples ci - dessous sur la façon de positionner l'infobulle.
La tooltiptext classe contient le texte de l' infobulle réelle. Il est caché par défaut, et sera visible sur le vol stationnaire (voir ci-dessous). Nous avons également ajouté quelques styles de base à elle: largeur de 120px, couleur de fond noir, blanc couleur de texte, texte centré, et top 5px et rembourrage en bas.
Le CSS3 border-radius propriété est utilisé pour ajouter des coins arrondis au texte de l' infobulle.
Le :hover sélecteur est utilisé pour afficher le texte de l' infobulle lorsque l'utilisateur déplace la souris sur le <div> avec class="tooltip" .
Positionnement infobulles
Dans cet exemple, l'infobulle est placé à droite (left:105%) à "hoverable" (<div>) (left:105%) du "hoverable" texte (<div>) . A noter également que le top:-5px est utilisé pour le placer dans le milieu de son élément conteneur. Nous utilisons le numéro 5 parce que le texte de l' infobulle a un rembourrage en haut et en bas de 5px. Si vous augmentez son rembourrage, augmentent également la valeur de la partie top des biens pour veiller à ce qu'il reste au milieu (si cela est quelque chose que vous voulez). Il en va de même si vous voulez l'infobulle placé à gauche.
Tooltip droit
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Résultat:
gauche Tooltip
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Résultat:
Si vous voulez que l'infobulle apparaisse en haut ou en bas, voir les exemples ci-dessous. Notez que nous utilisons la margin-left propriété avec une valeur de moins de 60 pixels. Ceci est de centrer l'infobulle ci-dessus / en dessous du texte hoverable. Il est fixé à la moitié de la largeur de la bulle (120/2 = 60).
Top Tooltip
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Résultat:
Tooltip Bottom
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Résultat:
Arrows tooltip
Pour créer une flèche qui doit apparaître d'un côté spécifique de l'info - bulle, ajouter du contenu "vide" après infobulle, avec la classe pseudo-élément ::after ainsi que le content des biens. La flèche elle-même est créée en utilisant les frontières. Cela rendra le look infobulle comme une bulle.
Cet exemple montre comment ajouter une flèche vers le bas de l'info-bulle:
Bas Flèche
.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 Explained
Positionner la flèche à l' intérieur du infobulle: top: 100% placera la flèche en bas de l'infobulle. left: 50% sera centré sur la flèche.
Remarque: Le border-width propriété indique la taille de la flèche. Si vous changez, changez aussi la margin-left de la valeur à la même chose. Cela permet de garder la flèche centrée.
Le border-color est utilisé pour transformer le contenu en flèche. Nous avons mis la bordure supérieure au noir, et le reste à la transparence. Si tous les côtés étaient noirs, vous retrouvez avec une boîte carrée noire.
Cet exemple montre comment ajouter une flèche vers le haut de l'infobulle. Notez que nous avons mis la couleur de la bordure inférieure cette fois:
Haut Arrow
.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 à la gauche de l'info-bulle:
Flèche 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'info-bulle:
Flèche 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:
Fade In infobulles (Animation)
Si vous voulez disparaître dans le texte de l' infobulle quand il est sur le point d'être visible, vous pouvez utiliser le CSS3 transition du bien avec l' opacity des biens, et aller d'être complètement invisible à 100% visible, dans un certain nombre de secondes spécifiés (1 seconde dans notre exemple):
Exemple
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
} Essayez - le vous - même » Remarque: Vous en apprendrez plus sur les transitions et animations plus tard dans notre tutoriel.