Bric à Brac informatique  logo

Création d'une petite fenêtre informative (bulle)
après passage de la souris sur un lien

(identifiée parfois sous le nom  page pop-up) 


Le but  est de pouvoir afficher une petite fenêtre d'information après passage du pointeur de la souris sur un lien donné

Pour obtenir ce résultat, il faut  :

Dans ce document, vous trouverez dans une première partie, le mode opératoire de base pour obtenir une bulle informative. Et dans une deuxième partie quelques suggestions pour personnaliser ces bulles.

Exemple de bulle informative sur la page  : http://www.bricabracinfo.fr/Details/photof.php. Copie d'écran ci-dessous :

Le passage du pointeur de la souris sur le lien "Les deux versions freewares coexistent" entraîne l'affichage de la bulle dont le titre est "Photofiltre V6 et PhotoFiltre 7"

PREMIÈRE PARTIE : PRINCIPES DE BASE POUR OBTENIR UNE BULLE INFORMATIVE

Passer votre pointeur de souris sur le texte suivant Ci-dessous, vous trouverez un mode opératoire pour voir un résultat des plus simples.

1. Code html à insérer dans la page

Placer le curseur à l'endroit où devra apparaître la bulle informative.

Activer la commande : Insertion, Code HTML ...dans les éditeurs de texte BlueGriffon ou Kompozer ou activer le Code source de la page Web.

<a class="nom_de_la_classe_donné_à_la_bulle"
href="#">
nom du lien informatif
<span> texte informatif </span></a>

2. Création des éléments à insérer dans la feuille de styles

Les éléments à créer sont au nombre de 4

Supposons que le nom donné à la la bulle informative  soit  bulleinfo.

Le code à insérer étant à l'intérieur des balises <a> ...</a>, nous aurons à créer les styles suivants :

- a.bulleinfo
- a.bulleinfo:hover
- a.bulleinfo span
- a.bulleinfo:hover span


a.bulleinfo { 

  position: relative; 

  text-decoration: none; 

  /* Le choix de l'attribut text-decoration est fonction de votre choix pour l'affichage du lien correspondant à l'infobulle */

  color: #000000;

/* Le choix de  couleur de texte est un choix personnel */

  }


a.bulleinfo:hover { 

  background-color: white;

/* Le choix de  couleur de l'arrière-plan de la bulle après passage de la souris (hover) est un choix personnel */

}


a.bulleinfo span { 

  display: normal;

/* le choix de none pour display permet de masquer tout le texte devant apparaître dans la bulle au passage de la souris (saisi entre les balises <span> ... </span>) */

}


a.bulleinfo:hover span { 

/* le texte saisi entre les balises <span> ... </span>) doit s'afficher au passage de la souris sur le lien */

  display: block; 

/* le choix de bloc pour display permet d'afficher tout le bloc de texte contenu dans la bulle */

  position: absolute; 

/* la position absolute, se fera par rapport à la balise "a:bulleinfo span" (le parent) qui est en position relative avec les valeurs indiquées pour top, left et width */

  top: 30px; 

  left: 10px; 

  width: 300px;

  border: 1px;

/* l'encadrement de la bulle sera d'une épaisseur de 1pixel,  ceci sur les 4 cotés */ 

  border-style: solid;

/* border-style indique l'aspect de la bordure (c'est à dire bordure continue) */

  border-color: #000000; 

/* border-color indique la couleur de la bordure (noire pour cet exemple) */

  color: #000000;  

/* color indique la couleur de la police */

  text-align: justify; 

  background-color : white;

/* Le choix de  couleur de l'arrière-plan de la bulle après passage de la souris (hover) est un choix personnel */

  font-weight: normal;  

/* par défaut la police est en gras avec normal, cette propriété est annulée */ 

  padding: 5px; 

/* l'attribut padding permet de créer un espace donné (en pixels) entre la bordure et le bloc de texte */ 

 }

NOTE :

Pour information, pour créer une autre forme de page pop-up, voir la fiche : création d'une fenètre pop-up après un clic


DEUXIÈME PARTIE : SUGGESTIONS POUR PERSONNALISER UNE BULLE INFORMATIVE

Ci-dessous, vous trouverez un mode opératoire

Il est intéressant de pouvoir agrémenter l'affichage de la bulle informative en la personnalisant.

Créer un titre à la bulle

Reprenons l'exemple de code donné dans la partie 1, il faut créer le titre à insérer entre deux balises <span> ... </span>.

Activer la commande : Insertion, Code HTML ...dans les éditeurs de texte BlueGriffon ou Kompozer ou activer le Code source de la page Web. Le principe de base est celui ci-dessous.

ATTENTION :
Contre toute logique le code à saisir devra se trouver après le texte informatif.
Pour éviter le chevauchement du texte informatif sur le titre, il faut insérer 2 balises <br>

<a class="nom_de_la_classe_donné_à_la_bulle"
href="#">
nom du lien informatif
<span>

<br><br>

texte informatif

<span> TITRE </span> </span></a>

REMARQUE :

La bulle informative mise en exemple en début de document, avec titre,  est obtenue suite à un rajout de code au niveau du titre, le code HTML est un peu modifié par rapport au code indiqué en partie 1  et il y a aussi un rajout dans la feuille de style. Voir ci-dessus le nouveau code.

Explications :

- Modification du code : Pour comprendre cette modification, observer la première balise <span>, elle n'est pas ferm&e. Le TITRE est annoncé avec une seconde balise <span>. Les balises <span< sont ferm&es après saisie du TITRE.

- Rajout de  style dans la feuille de style  c'est à dire : a.bulleinfo:hover span span. Celle-ci sera créée sur le même modèle que    a.bulleinfo:hover span {  } mais avec une position centrée et une inversion des couleurs d'arrière-plan et de la police

Créer une bulle aux coins arrondis

Pour afficher une bulle aux coins arrondis, on peut utiliser la propriété border-radius du CSS3. Pour obtenir le même arrondi aux 4 angles de la bulle encadrée, on ajoutera cette propriété à l'élément (pour notre exemple) a.bulleinfo:hover { ... }en fixant un nombre de pixels donné comme par exemple :      border-radius: 10px;

Modifier l'aspect du curseur lors du pointage sur le lien d'annonce de la bulle

Par défaut, lors du passage  du pointeur de la souris sur le texte devant affiché une info-bulle le pointeur de la souris est en forme de main.
Il est possible de modifier cet aspect en affectant une propriété à l'élément cursor que l'on rajoute à l'élément a.bulleinfo (pour notre exemple)

Pour modifier l'aspect du curseur en forme de Point d'interrogation  on ajoutera par exemple : cursor:help;

Modifier la couleur de la police affichée dans la bulle, ou aussi de  l'arrière-plan   ou encore de la bordure

Pour notre exemple, dans l'élément a.bulleinfo:hover span { ... } modifier la propriété de

- color pour modifier la couleur de la police

- blackground-color  pour modifier la couleur de l'arrière-plan

- border-color   pour modifier la couleur de la bordure

en recherchant  une autre couleur parmi les codes de couleur HTML disponibles par exemple sur cette page :
http://html-color-codes.info/Codes-couleur-HTML/


Mis à jour 20/06/18

Retour