Popup en CSS, sans Javascript

Décembre 2016

Voici comment réaliser une popup d'information en pure CSS, sans Javascript.

L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur.
Parmis les attributs CSS modifiés, on utilise display:none afin de masquer/afficher la popup selon que le curseur se trouve dessus ou non.

Un popup sur un lien



Le contenu de la popup sera juste placé dans une balise <span> à l'intérieur de la balise <a>

Voici le code CSS, à mettre dans le <head> de votre fichier html ou dans un fichier CSS à part :

a.info
{
    position:relative;
    z-index:24; background-color:#ddd;
    color:#000;
    text-decoration:none
}

a.info:hover {z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span
{
    display:block;
    position:absolute;
    top:2em; left:2em; width:10em;
    border:1px solid #0cf;
    background-color:#555; color:#fff;
}


Et voici le code HTML, directement à insérer dans votre page :

    Voici un lien vers <a class="info" href="http://commentcamarche.net">CCM<span>Communauté d'assistance et de conseils high tech</span></a>.


Et voici ce le résultat:

Sans le curseur:


Avec le curseur dessus:

Un popup sans le lien


Si vous voulez juste faire une popup sans lien, vous pouvez mettre href="#" dans votre balise <a>, mais certains navigateurs considèrent que "#" dans un lien est le haut de la page, ce qui cause quelques désagréments lors de la navigation.

Pour contrer ceci, remplacez la balise <a> par une balise <span> (dans le HTML et dans le CSS). Cela fonctionne aussi.
  • Note : avec la balise <span>, vous n'avez pas la petite main du pointeur il suffit de modifier légèrement le CSS :

span.info
{
    position:relative;
    z-index:24; background-color:#ddd;
    color:#000;
    cursor: pointer;
}

Le résultat est le même, mais il n'y a pas de <a> inutile.


(Astuce d'origine: http://psacake.com/web/jl.asp )

A voir également :

Ce document intitulé «  Popup en CSS, sans Javascript  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.