Info-bulles en survol, pur html-css

Afficher une information en survol d’un élément ne demande que quelques lignes d’html et css.

Précédent | 4/4

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.