Les infobulles 

Avant de commencer cet article, je me suis posé une question. Comment doit-on écrire infobulle? On voit souvent ce mot avec un trait d'union (info-bulle), d'autres fois sans, comme ici. En fait, il fut un temps où il y en avait un mais en 1990, son orthographe officielle l'a fait disparaitre comme les accents circonflexes aujourd'hui. Avec le trait d'union, ce mot est tout de même accepté. Avec le trait d'union, il faudrait dire info-ballon (drôle d'idée tout de même!).

Lorsque l'on a un texte qui contient des termes spéficiques qui peuvent être ignorés de certains visiteurs, plutôt que de mettre une explication directement dans le texte, l'infobulle s'avère assez pratique. Comme vous allez voir, c'est très simpleÇa veut dire facile à mettre en oeuvre.


Le mot, ou expression, qui reçoit l'infobulle est l'intitulé d'un lien vide href="". Vous complétez cet intitulé par une balise <span> qui renferme le contenu de l'infobulle et c'est tout. Vous pensez bien que le CSS a son mot à dire là-dedans. On voit ça tout de suite. Vous avez intérêt à mettre le style dans votre feuille de style principale si vous utilisez régulièrement les infobulles. Ça vous évitera de la recopier systématiquement sur chaque page de votre site.


Les liens de la classe info, a.info, ne présentent rien de particulier si ce n'est qu'ils sont positionnés afin de de pouvoir utiliser la propriété z-index. Il faut également lui donner une couleur de fond afin que le visiteur se rende compte qu'il y a quelque chose à voir par là.

Quand la souris passe sur le lien, a.info:hover la couleur de fond devient transparente ce qui a pour effet de lui donner la couleur de fond de la page ou du bloc où il se trouve.

On arrive à l'infobulle à proprement parlé avec a.info span. Tant que la souris n'est pas sur le lien, on n'affiche pas l'infobulle, c'est ce que signifie display: none. Pour la largeur de l'infobulle, width: prend la valeur "auto" c'est à dire que c'est le navigateur qui gère la largeur en l'adaptant au texte. Dans notre exemple, on laisse juste 5 pixels de chaque côté du texte. Un petit mot sur white-space: nowrap. Cette propriété a pour effet d'interdire les passages à la ligneC'est ce qui arrive sans la propriété. Pour revenir à une gestion normale des espaces la propriété devient white-space: normal;.

Il faut quand même manier ça avec précaution. Comme tous les infobulles ont le même niveau dans la "pile", les premières déclarées passeront sous les autres quand elles s'afficheront. Le remède à ça est de les afficher au dessus du lien comme dans l'exemple suivant.

Il ne nous reste plus qu'à afficher l'infobulle. On fait ça dans a.info:hover span avec display: block qui est la façon d'afficher la plus souple. Si vous êtes passés par la page "Photos", vous n'avez pas manqué de voir les trois mousquetaires. Il y avait Athos, Porthos, Aramis et d'Artagnan.

Comme vous pouvez le constater, on peut s'offrir un peu de fantaisie. Je n'ai pas modifié le code du style d'un iota. Seule la partie HTML subit une modification.


Je n'ai rajouté qu'un bout de style dans les balises <span>, je place l'infobulle au dessus du texte. La propriété top: a la priorité sur celle déclarée dans la feuille de style. Plutôt que de mettre du texte, je mets une image et le tour est joué.

Dans la famille j'en veux encore, voilà un autre exemple qui utilise la même base. C'est moins simpleJe voulais dire facile
C'est à peu près
la même chose à mettre en oeuvre mais ce n'est qu'un petit bout de code à rajouter. Attention, pour mettre cet exemple sur cette page, j'ai du changer les noms, info devient info2 et maBulle devient maBulle2. Sans cela, la présentation des premières infobulles aurait été affectée par cette dernière. On va commencer par le HTML. Rien de bien nouveau ici. Je mets simplement la première ligne en gras avec les balises <b> et </b>.


Le style n'est pas bien méchant, on rajoute des bords arrondis et un fond avec des couleurs qui changent et transparent.



Dans a.info2 span j'ai retiré la couleur de fond blanche. Il suffit de retirer /* et */ pour que l'infobulle devienne opaque. On arrondit les angles avec border-radius et on applique une ombre intérieure bleue et une autre extérieure noire avec box-shadow. On finit par dire que l'animation durera 1,5 seconde.

C'est dans @keyframes maBulle2 que l'on décrit l'animation. La couleur de fond l'infobulle commence en rouge transparent et va jusqu'à un vert transparent également.

On va terminer avec une dernièreElle m'amuse bien celle-là infobulle. Je l'ai trouvée en navigant pour voir s'il n'y avait pas plus simple que ma méthode. Il y avait plus simple mais celui qui avait écrit ça devait avoir mangé un clown à son petit déjeuner. Son code fonctionnait bien si l'infobulle était toute seule sur la page. Il n'y avait pas moyen d'insérer l'infobulle dans un texte. Si je vous dis ça, c'est pour vous inciter à vérifier ce que vous faites avant de mettre une page en ligne. Par exemple, si les infobulles fonctionnent bien avec Safari pour Windows, les animations, elles, ne fonctionnent pas. Dans l'absolu, ce n'est pas gênant mais il est bon de savoir ce que l'on fait.

J'ai repris le code de la précédente que j'ai adapté.


Si on met à part la présentation, seule la règle @keyframes change. Vous connaissez déjà la fonction rotate(), voilà la fonction scale() qui agrandit ou réduit la taille d'un élément. La valeur par défaut est 1 qui ne modifie en rien la taille. Les valeurs supérieurs agrandissent l'objet tandis que les valeurs inférieures le réduisent. Si l'on met une seule valeur, la déformation aura lieu proportionnellement horizontalement et verticalement. Avec deux valeurs, la première correspond à l'axe des abcisses et la deuxième à l'axe des ordonnées. scale(1.25) est égal à scale(1.25, 1.25). Si on veut ne modifier la taille que sur un axe, on utilise les fonctions scalex() ou scaley() qui n'acceptent qu'une valeur. scale(2, 1.5) est égal à scalex(2) et scaley(1.5).