Une info-bulle, ou popover en anglais, est une information qui s’affiche en survol ou en clic d’un élément. ce système permet de ne pas surcharger une interface mais de permettre l’accès à une information si le visiteur en fait la demande par un simple survol de l’élément. Les infos-bulles peuvent être complexes, utilisant du javascript et des requêtes AJAX, mais on fera ici la démonstration d’une méthode simple.
Structure HTML
La base de la structure html est un élément visible et un élément invisible, tous deux encapsulés dans un tag.
<div class="bouton b1">
Survolez-moi!
<div class="hidden">
Une info cachée
</div>
</div>
<div class="bouton b2">
Survolez-moi aussi!
<div class="hidden">
Une info cachée
</div>
</div>
Ici, un div avec la classe bouton contient une image (qui sera visible) et un bloc d’information qui sera caché.
CSS
Le code css stylise le bouton, et le cache. En survol de l’élément, la partie invisible est affiché avec display:block.
.bouton {
position:absolute;
cursor:pointer;
}
.bouton.b1 {
left:700px;
top:150px;
}
.bouton .hidden {
background-color:red;
color:#fff;
border-radius:4px;
padding:10px;
text-align: center;
position:absolute;
right:-220px;
top:20px;
width:200px;
display:none;
}
.bouton:hover .hidden {
display:block;
}
Avec un effet d’apparition
En utilisant une ou plusieurs animations, il est possible de produire un effet.
.bouton .hidden {
position: absolute;
top: -42px;
left: -95px;
text-align: center;
background-color: rgba(0,0,0,0.85);
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.4);
color: #fff;
font-size: 12px;
padding: 7px 10px;
width: 200px;
z-index: 4;
display: none;
}
.bouton:hover .hidden {
display: block;
animation: fade-in .3s linear 1, move-up .3s linear 1;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes move-up {
from { top: -60px; }
to { top: -42px; }
}
De plus jolis blocs
il est évidemment possible de composer avec css de plus jolis blocs. On trouve de nombreux codes sur le web, notamment le site cssarrowplease.