[CSS] Infobulles 1- Manip' de base

31.05.2009

Les infobulles sont un grand classique : on apprend assez vite à en faire avec l'attribut title, on en voit de plus jolies sur d'autres sites, on veut les mêmes chez soi. On se renseigne un peu, on trouve des réponses dans les forums ou ailleurs, on en conclut rapidement que c'est une cuisine à base de span, de position:absolute, de marges négatives voire de z-index et d' overflow. Un peu découragé, on conclut qu'on n'y pige que pouic et que si ça marche du premier coup il faut courir acheter un billet de loterie.

Voilà un début stimulant… Moi aussi j'ai ma recette à faire des bulles et je l'utilise dans ce blog. Je n'ai rien inventé du tout, juste picoré ailleurs et un peu ajusté quelques trucs mal fichus. Essayons de reconstruire cette recette ensemble. Vous verrez que ce n'est pas si mystérieux quand on s'y prend dans l'ordre, quand on pense organisation de l'info avant de penser effet décoratif . Et mine de rien vous allez apprendre deux ou trois choses sur le CSS.

Note : tout ceci est parfaitement possible dès le niveau Confiance puisque c'est purement du CSS.

Le point de départ

Vous le connaissez peut-être :

 Voici <a href="...." title="qui vous enverra je ne sais où !">un lien</a> muni d'une infobulle.

et il vous donne ceci :

Voici un lien muni d'une infobulle.

Clair, simple et facile : même pas besoin de plonger dans le code source puisque, dans l'éditeur de texte OB, l'outil d'ajout de liens permet de définir le title. La bulle ainsi fabriquée a l'aspect des info-bulles du système d'exploitation – très souvent un rectangle jaune bordé de noir. Ça permet au lecteur de tout de suite comprendre devant quoi il se trouve, or c'est important un lecteur, on l'oublie quelquefois…

Mais bon – auteur tyrannique, tu veux des infobulles comme ci ou comme ça. Soit. Avant d'aller plus loin regardons encore ce code source si simplet. Moi j'y vois plusieurs choses intéressantes :

le texte d'information est voisin du texte principal ("un lien") plutôt que relégué dans une quelconque table de correspondance ou, pire, dans un fichier annexe (Javascript ou autre chose) ;
non seulement il est voisin du texte principal mais il est inclus dans le lien : entre <a...> et </a> se trouve tout ce qu'il faut savoir sur le lien ;
il n'y a aucun renseignement de présentation (couleur, police de caractères, etc.), seulement de l'information : le texte. Ce texte n'est mentionné qu'une seule fois, et signalé par un seul mot à peu près explicite : title ;
enfin il n'y a pas besoin d'ajouter autre chose au lien : pas de balise spéciale a_with_info, pas de décomposition en quinze temps dans le genre de complement="info", infotype="bubble", infotext="qui vous enverra je ne sais où !"…

Résumé : des modifications minimales et placées à l'endroit logique pour ça. Pas de gras, rien que du muscle. Résultat : on comprend ce qu'on lit, on sait tout de suite comment le modifier, on le modifie à coup sûr. J'aime.

La même chose sans attribut

Il n'y a, en CSS, aucun moyen de préciser ce qu'on fait de l'attribut title. En gardant à l'esprit les remarques précédentes (faire simple, concis, auto-contenu) ce qui se rapprocherait le plus de ce qui précède, du point de vue de l'organisation des informations, serait à peu près

 Voici <a href="..." >un lien <span>qui vous enverra je ne sais où !</span> </a> muni d'une infobulle.

Inutile de couiner qu'on n'aura pas d'effet d'infobulle à l'affichage : je sais. Mais au moins le texte informatif est-il 1-dans le lien 2-bien distingué du reste, et c'est l'essentiel. Comme un span est un objet des plus banals, qu'il peut y en avoir d'autres dans le lien, il sera bon de donner à celui-ci une classe qui signale sa nature :

 Voici <a href="..." >un lien <span class="infotexte">qui vous enverra je ne sais où !</span> </a> muni d'une infobulle.

Si vous employez déjà une classe nommée infotexte trouvez un autre nom.

Toujours rien de spécial à l'affichage, en voici d'ailleurs la preuve :

Voici un lienqui vous enverra je ne sais où ! muni d'une infobulle. Comme nous allons pas mal torturer l'infobulle j'ajoute ce texte de remplissage pour un peu mieux nous repérer.

Et pourtant, avec ce balisage très rudimentaire, nous avons épuisé pour ce premier article la question des modifications HTML : à partir d'ici, et toujours pour ce premier article, tout est du CSS. Vous pouvez vous amuser à créer un article de test contenant exactement ce paragraphe, puis ensuite à compléter votre CSS étape par étape – c'est même une bonne idée.

Décoration

Commençons par le plus facile : donner à ce texte un aspect plus ou moins heureux. Par exemple :

 .infotexte {border:2px dashed red; color:blue; background:white}

Résultat :

Voici un lienqui vous enverra je ne sais où ! muni d'une infobulle. Comme nous allons pas mal torturer l'infobulle j'ajoute ce texte de remplissage pour un peu mieux nous repérer.

Le texte est-il assez en évidence ?

Distinguons-nous du tout-venant

Bien sûr ça cloche un peu. Je ne parle pas de l'esthétique (discutable…) mais de l'arrangement du texte : l'infobulle vient toujours s'inviter entre les mots un lien et muni. Attendons encore un peu avant de traiter du survol du lien. Ce qu'on voudrait c'est que, au repos, le texte soit arrangé ainsi :

Voici un lien muni d'une infobulle. Comme nous allons pas mal torturer l'infobulle j'ajoute ce texte de remplissage pour un peu mieux nous repérer.

et que l'infobulle vienne gracieusement se placer au-dessus quand on l'invite.

Comment ajouter l'infobulle sans bousculer tout le monde ? Une goutte de jargon : vous lisez le texte de haut en bas et de gauche à droite, vous parcourez des yeux un long serpentin de lettres et d'images, serpentin qui descend une marche d'escalier chaque fois qu'il atteint le bord droit ( Dinnnng , faisait la vieille Underwood fétiche d'Ernest Hemingway). Ce long serpentin, en termes de CSS, s'appelle le flux du texte. Le navigateur lit la page HTML, reconstitue ce flux un mot après l'autre, et le dispose au mieux dans l'écran.

En insérant le span d'infobulle vous ajoutez quelque chose dans le flux et vous modifiez donc ce flux. Mais où l'insérer ailleurs que dans le flux ?

Il y a une réponse à cette question, le positionnement absolu. En précisant position:absolute dans la définition de la classe

 .infotexte {border:2px dashed red; color:blue; background:white; position:absolute}

le span sort du flux : le reste de la page fera comme s'il n'avait jamais été là, et donc muni viendra s'écrire juste après un lien.

C'est un premier pas intéressant mais… où donc va le span ? Hé bien il ne bouge pas, il reste benoîtement à l'endroit où il se trouvait avant de se lancer dans la quête de l'absolu. Mais il y a du monde là, maintenant ? Très juste et il faut décider. La décision est : je m'assieds sur vous – en clair le span (avec son fond et sa bordure) s'écrit par-dessus le reste du texte. Autant vous montrer ce que ça donne :

Voici un lienqui vous enverra je ne sais où ! muni d'une infobulle. Comme nous allons pas mal torturer l'infobulle j'ajoute ce texte de remplissage pour un peu mieux nous repérer.

D'accord ce n'est pas au point, remarquez tout de même que le texte normal est maintenant disposé comme désiré (= comme s'il n'y avait pas d'infobulle).

Gardons notre quant-à-nous

Bon : voilà que l'infobulle plane au-dessus de la piétaille mais toujours à l'aplomb de son point d'amarrage initial. Comment allonger l'amarre ?

Le positionnement absolu sert souvent à envoyer un bout de texte à un endroit bien défini de la page mais ce n'est pas notre besoin : nous, on veut juste l'éloigner un peu de son point de départ. Un peu mais à une distance constante de ce point de départ : vous imaginez si les infobulles apparaissaient toutes au même endroit de la page ?

Cela s'obtient comme pour décaler un peu du texte normal : on ajoute ou retranche des marges. Supposons qu'on veuille l'infobulle placée plus bas que un lien, pour dégager la vue, mais qu'elle morde un petit peu sur ce même un lien, histoire de montrer le rapport entre les deux. Une façon de l'obtenir est

 .infotexte {border:2px dashed red; color:blue; background:white; position:absolute; margin-top:1em;margin-left:-1em}

Application immédiate :

Voici un lienqui vous enverra je ne sais où ! muni d'une infobulle. Comme nous allons pas mal torturer l'infobulle j'ajoute ce texte de remplissage pour un peu mieux nous repérer.

Bouge de là !

Nous y sommes presque : il ne reste plus qu'à sortir l'infobulle du champ lorsqu'on ne survole pas le lien.

Plusieurs techniques sont pensables pour un même résultat visuel (en jouant sur display ou visibility), la plus respectueuse en termes d'accessibilité est de jouer sur les marges pour envoyer l'infobulle très loin hors de l'écran.

Accessibilité ? Tout le monde n'a pas de bons yeux, tout le monde ne peut pas utiliser une souris (plâtrez-vous donc un bras, vous comprendrez). Il existe des moyens de navigation adaptés : synthèse de parole ou, tout bonnement, navigation au clavier. Je sais que mon blog n'est pas à citer en exemple sous ce rapport et ne donnerai donc aucune leçon là-dessus. Mais, puisque j'ai entendu parler d'une technique accessible et répondant au besoin du jour, je l'utilise et vous la propose. Ça fera toujours ça de moins à reprendre le jour où je saurai corriger mes lacunes – et, encore une fois, je sais qu'il y en a.

Nous disions donc… Pour que la bulle parte au diable Vauvert quand on ne survole pas le lien, c'est très simple :

 .infotexte {margin-left:-999em}

Lecteur sataniste, tu peux utiliser -666em si ça t'amuse. Le résultat, naturellement :

Voici un lienqui vous enverra je ne sais où ! muni d'une infobulle. Comme nous allons pas mal torturer l'infobulle j'ajoute ce texte de remplissage pour un peu mieux nous repérer.

Hi hi… l'infobulle se trouve maintenant très loin à gauche du bord gauche de l'écran. Tendez le bras dans le vide et palpez l'air, vous la sentirez peut-être. Et pour la faire revenir ? En français ça se dit un infotexte placé dans un lien qu'on survole a une marge gauche de -1em . En CSS c'est tout comme :

 a:hover .infotexte {margin-left:-1em}

ou, pour donner le CSS complet :

 .infotexte {border:2px dashed red; color:blue; background:white; position:absolute; margin-top:1em;margin-left:-999em} a:hover .infotexte {margin-left:-1em}

Voilà le résultat, passez le curseur sur le lien :

Voici un lienqui vous enverra je ne sais où ! muni d'une infobulle. Comme nous allons pas mal torturer l'infobulle j'ajoute ce texte de remplissage pour un peu mieux nous repérer.

Avant-dernière précaution

L'infobulle est dans le lien, l'aspect de son texte peut donc être influencé par celui du lien. Il sera prudent alors de préciser complètement, une fois pour toutes, ces propriétés dans le CSS :

 .infotexte {border:2px dashed red; color:blue; background:white; font-weight:normal; font-style:normal;font-family:sans-serif; font-size:10px;line-height:normal; text-decoration:none; position:absolute; margin-top:1em;margin-left:-999em} a:hover .infotexte {margin-left:-1em}

Si bien sûr vous préférez des infobulles en énormes lettres gothiques, en gras et en italique, libre à vous. Nous n'avons pas le mêmes goûts…

Dernière précaution

En l'état ça marche bien mais, dans un blog OB, vous risquez une surprise si le lien se trouve près d'un bord droit et que l'infobulle doive donc déborder à droite : elle ne débordera peut-être pas mais sera rognée, massicotée au ras du bord. Cela vient de ce que les blogs OB sont configurés par défaut pour qu'il en soit ainsi. Supposons qu'il s'agisse de bulles dans les articles et que, comme sur le blog que vous êtes en train de lire, les articles se trouvent dans la cellule cl_1_0. La correction en CSS est simple :

 #cl_1_0 {overflow:visible}

et dès lors tout ce qui déborde des articles, de n'importe quel côté, se verra, et pas seulement les infobulles : si vous avez pris la mauvaise habitude de mettre des photos trop grandes en comptant sur ce rognage pour sauver les apparences, tant pis pour vous !

La suite

À ce stade l'infobulle est un simple rectangle à fond coloré. On n'a pas beaucoup progressé par rapport aux infobulles standard si ce n'est, tout de même, qu'on peut en changer la police de caractères, la couleur de fond et les bordures. Un prochain article examinera la manière d'embellir un peu tout ça.

Et justement voilà le tome 2