Une popup d'information au survol sans Javascript ni CSS

Parfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien.

On trouve beaucoup d'astuces sur internet impliquant du Javascript ou des CSS. En réalité, il existe un moyen de faire la même chose avec une simple balise HTML.

Avec la balise ACRONYM

Utilisez la balise acronym en mettant la description dans le title:

Des accords avec l'<acronym title="Organisation du Traité de l'Atlantique Nord">OTAN</acronym> ont été passés.

• Le terme possédant une popup apparaît avec un souligné en pointillés (ce qui permet de le distinguer d'un lien)
• Le descriptif apparaît quand le curseur est passé dessus.

Ce qui donne:

Avec la balise SPAN

Si vous souhaitez obtenir le même effet sans le souligné (par exemple pour ajouter un descriptif à une image), utilisez la balise span. La balise span permet aussi d'afficher la popup d'un coup pour un ensemble d'éléments (images, texte, etc.)

Exemple:

<span title="C'est le logo de CommentÇaMarche">
  <img src="http://www.commentcamarche.net/img/commentcamarche.png">
  Logo de CCM
</span>

Ce qui donne:



N'oubliez pas non plus que la plupart des balises (img, etc.) acceptent également l'attribut title.

Limites

• Vous n'avez pas le choix de la couleur de la popup
• Il n'est pas possible par ce moyen de mettre du texte riche (gras, italique, images...).
• Si vraiment vous voulez customiser votre popup, il y'a cette astuce popup en css sans javascript. Voici quelques exemples.

Ce document intitulé « Une popup d'information au survol sans Javascript ni CSS » 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.