Insérer une infobulle (balise title) dans un blog ou un site (débutant)

Créer une infobulle dans un article (tous blogs et sites)

Une infobulle, c'est quoi?

L'infobulle, c'est une fenêtre qui s'ouvre au passage de la souris, et qui contient du texte. On peut placer une infobulle sur un mot, une phrase, un lien, une image...

Passez la souris sur cette phrase pour lire l'infobulle

préalable à la création d'infobulles (1): rappel de programmation (débutant)

Avant d'aborder la création d'infobulles proprement dite, petites précisions concernant la programmation d'un blog en matière de HTML et CSS:

• Dans le code du modèle blog sont définis des fontes et styles "par défaut". La feuille de style CSS donne le ton: elle contient tous ces styles par défaut: lorsque l'on crée un nouvel article sans modifier la couleur ou la taille du texte, des liens, ils apparaissent selon cette feuille de style CSS. Dès que l'on choisit un modèle blog, on choisit en même temps sans le savoir une "feuille de style CSS". On peut d'ailleurs la modifier facilement (changer de fonte, la couleur des liens...) en allant dans l'onglet Mise en Page>Polices et couleurs, ou pour les familiers de CSS HTML, en allant directement à la source Mise en Page> Modifier le code HTML.

• Lorsque l'on écrit un article sans changer quoi que ce soit, il sera donc publié selon la couleur et la taille par défaut. Si l'on clique sur l'onglet "Modifier le code HTML" (de l'éditeur d'articles, pas de la mise en page), on y lit son texte en fonte "programmation" sans voir le moindre bout de balise.

Exemple:
Je rêve d'infobulles jour et nuit... donnera dans l'onglet "Modifier le code HTML" Je rêve d'infobulles jour et nuit...

préalable à la création d'infobulles (2): les balises < ... >

Dès que l'on abandonne la fonte par défaut définie dans le modèle, et que l'on modifie son texte (gras, italique, lien...) depuis l'onglet "rédiger", des balises apparaissent automatiquement dans l'onglet "Modifier le code HTML" sans que l'on n'ait besoin de connaitre quoi que ce soit à la programmation.

Il va falloir se servir de ces balises < ... > pour y introduire la fameuse info-bulle.

A quoi ressemble une infobulle dans l'onglet "modifier le code HTML": le title

Une infobulle se présente sous la forme:

title="texte de l'infobulle... "

C'est cela qu'il faut introduire à l'intérieur de balises (< ... >), et tout ça directement dans l'onglet "rédiger en code HTML". Une infobulle sera donc liée à un mot (ou phrase) "mis en exergue" d'une façon quelconque (lien, couleur, gras...) depuis l'onglet "Rédiger".

Une opération beaucoup plus simple à réaliser qu'à expliquer... Je passe donc à l'exemple (et pour les "grands débutants" et phobiques du HTML: vous pouvez commencer par les balises dans les commentaires avant de vous lancer dans l'infobulle, si vous trouvez tout ça trop confus. Un moyen simple de se familiariser avec ces notions de balise.)

Créer une infobulle sur un mot en caractères gras: (méthode débutant pas à pas)

Écrivez votre texte dans l'onglet rédiger:

Je rêve d'infobulles jour et nuit... (donne en HTML Je rêve d'info-bulles jour et nuit...)

Mettez en gras le mot ou le groupe de mots sur lequel vous souhaitez que s'ouvre l'infobulle au passage de la souris:

Je rêve d'infobulles jour et nuit...

Rendez-vous dans l'onglet "Modifier le code HTML": votre phrase se présente sous la forme:

Je rêve d'<span style="font-weight: bold;">infobulles</span> jour et nuit...

Traduction: la première balise <span style="font-weight: bold;"> définit le style à appliquer à ce qui suit (bold = gras). La balise </span> "ferme" l'action: seuls les mots entre ces deux balises seront en gras. Avant ou après, c'est le style par défaut qui sera utilisé d'office.

Reste à introduire l'infobulle title dans la première balise, après les derniers guillemets de la façon suivante:

Je rêve d'<span style="font-weight: bold;"title="Bienvenue dans le monde des info-bulles et rendez-vous bientôt dans l'onglet HTML de votre éditeur d'articles blog">infobulles</span> jour et nuit...

Et l'on obtient: (passez la souris sur le mot en gras)

Je rêve d'infobulles jour et nuit...

Créer une infobulle sur un mot en italiques, en couleurs, un lien... :

L'infobulle (le title="texte de l'infobulle...") peut et doit donc être associée à un mot ou groupe de mots auquel(s) on a attribué un style particulier. Quelque soit ce style, la méthode reste la même:

• Ecrire son texte dans l'onglet "rédiger" et attribuer le style voulu.
• Aller rechercher la balise qui définit ce style dans l'onglet "Modifier en HTML" et y introduire le title="texte de l'infobulle..." avant la première balise >

• Exemple avec une infobulle sur un mot en couleurs:

Écrire la phrase et choisir la couleur du mot qui sera lié à l'infobulle:

Je rêve d'infobulles jour et nuit...

Rechercher la balise qui définit cette couleur:

<span style="color: rgb(153, 51, 153);">

Introduire entre les guillemets et la balise > le title="texte de l'infobulle..."
Et on obtient:

Je rêve d'<span style="color: rgb(153, 51, 153);" title="Bienvenue dans le monde des info-bulles et rendez-vous bientôt dans l'onglet HTML de votre éditeur d'articles blog">infobulles</span>jour et nuit...

Retour dans Rédiger ou Aperçu pour obtenir:

Je rêve d'infobulles jour et nuit...

• Exemple avec une infobulle sur un lien:

Je ne détaille plus les étapes, mais pour obtenir :

Je rêve d'infobulles jour et nuit...

Il faut rechercher les balises <a> qui encadrent l'adresse du lien (ça rappelle l'insertion de balises dans les commentaires) et y introduire son infobulle:

Je rêve d'<a href="http://www.adresse-du-site.fr" title="Bienvenue dans le monde des infobulles et rendez-vous bientôt dans l'onglet HTML de votre éditeur d'articles blog">infobulles</a> jour et nuit...

Associer une infobulle à une image: (alt et title)

Là encore, c'est le même principe qui consiste à introduire dans les balises de l'adresse de l'image un title="..." et un alt="...". C'est ce que l'on appelle "éditer son image": un plus pour le référencement des images, mais un sujet trop long pour l'aborder ici, si je veux éteindre l'odinateur avant minuit. Je reviendrais spécifiquement sur l'édition des images dans un autre article.

Astuce débutant pour créer une infobulle sans se perdre dans les balises d'une page HTML

Envie d'une infobulle? La théorie vous parait à peu près compréhensible, mais vous hésitez à passer à la pratique par crainte d'affronter une page entière de HTML et de ne jamais vous y retrouver dans toutes ces balises disséminées aux quatre coins de la page?

Une solution existe: le copier-coller. Si vous copiez un mot ou une phrase (depuis la page "rédiger" qui contient une infobulle (ou toute autre modification) pour la coller ailleurs, l'infobulle suivra le mouvement!
L'astuce consiste donc tout simplement à écrire tout en haut de votre page le ou les mots qui devront comporter une infobulle. Vous n'aurez ainsi aucun problème à les retrouver lorsque vous vous rendrez dans l'onglet "Modifier le code HTML". Une fois L'infobulle title="..." rajoutée, vérifiez dans "Aperçu" que tout va bien. Retournez dans l'onglet "rédiger", copiez ou coupez le (les) mot(s) qui contiennent l'infobulle, et collez-les où vous voulez.
(Vous pouvez aussi ouvrir simultanément deux "publication d'un message": le premier sera votre article proprement dit. Le second sera un bloc-note à jeter après usage, dans lequel vous créerez uniquement vos infobulles, puis copier et coller dans l'article.)

Comment se servir des infobulles (title="...")

Dans un blog ou un site web, l'infobulle peut rendre différents services: une aide au référencement d'images (sujet à venir), apporter une légende à une image, donner des précisions sur un lien, ou tout simplement avoir une fonction documentaire.

• Fonction documentaire d'une infobulle:

Exemple d'une infobulle sur un lien:
Pour en savoir plus, visitez le site de machin-truc...

Dans ce cas, l'infobulle renseigne sur le contenu du site, et indique éventuellement une page à ne pas manquer.

Voir un exemple très pertinent d'infobulle dans le blog Pyramidales (un exemple dans cet article): de nombreux noms propres renvoient par un lien à un article explicatif encyclopédique (ex: wikipédia). Une infobulle s'ouvre sur ces liens et comporte une partie des informations du site encyclopédique. C'est un bon moyen de réaliser deux opérations en une:

• ... éclairer les visiteurs les plus curieux sans se perdre en détails pour la majorité des lecteurs ni perdre la cohérence de son contenu, et leur permettre d'accéder à ces informations sans quitter le blog
  
• ... mais aussi citer ses sources (car si wikipédia est gratuite, ses ressources demeurent principalement sous licence créative commons)

Infobulle sur un mot:

L'infobulle permet de donner la définition d'un mot sans que cela n'encombre l'article, comme dans la phrase ci-dessous extraite d'un précédent article, ou de donner des informations complémentaires qui ne concernent qu'un petit nombre de lecteurs (pourquoi pas les données exif d'une photo? Ou le nom latin d'un insecte ou d'une plante?...)

... quelques clichés pris au microscope électronique d'exuvie de libellule.

Bref, il existe mille bonnes raisons d'avoir besoin un jour ou l'autre d'une infobulle. Et title="..." est un outil tellement souple que chaque bloggueur peut lui trouver un usage spécifique et personnel selon ses propres besoins et le contenu de son blog.

Les limites des infobulles dans un article de blog ou dans un site(title="...")

Première restriction: une infobulle n'apparait qu'au passage de la souris. En dehors de ça, personne ne sait qu'elle existe, tapie quelque part dans les entrailles du code HTML de l'article.

• Une infobulle placée sur un lien a toutes les chances d'être repérée (puisqu'il faut passer la souris sur le lien pour l'activer)

• Une infobulle sur une image ou sur un bouton, un logo... a également de grandes chances d'être découverte par le visiteur. (On cherche toujours un lien sur une image ou un bouton).

• Une infobulle sur un simple mot en gras ou en italiques... a toutes les chances de ne servir à rien! Personne n'ira soupçonner son existence.

Pour être sûr que l'on trouve toutes ces infobulles que vous vous êtes donné tant de mal à réaliser, il est toujours possible de les lier à un lien dont l'adresse est fausse (comme je l'ai fait à titre d'exemple dans cet article). Mais cette idée me gêne et je suppose qu'elle est également déconcertante pour le visiteur: ça a l'apparence d'un lien jusque dans la petite main blanche... et ça n'est pas un lien.
En dehors d'un lien ou d'une image, il est donc préférable de placer l'infobulle sur un mot facilement repérable (un mot en gras et de couleur proche de celle d'un lien par exemple), et / ou d'indiquer clairement qu'une infobulle se cache derrière un mot.

Deuxième restriction à l'infobulle: lecture en temps limité!
L'infobulle ne reste affichée que quelques secondes puis disparait. Il faut alors repasser la souris pour la réafficher. En général, le temps qui nous est imparti pour lire son contenu est suffisant, mais une infobulle trop longue disparaîtra avant d'arriver au bout. J'ignore s'il existe un moyen de régler le temps d'affichage d'une infobulle dans le CSS?

Troisième restriction: la perte de sens.
Une infobulle est censée apporter du sens et donner des compléments d'informations. Mais en multipliant les title="..." sur tout ce qui se trouve entre 2 balises, la structure globale d'un article perd toute cohérence. Mieux vaut réserver l'infobulle à des fonctions bien précises, réelles et facilement identifiables par le lecteur.

De plus, le fait qu'une infobulle n'apparaisse pas peut faire oublier qu'elle est un élément textuel de l'article au même titre que le texte "visible". Et écrire son petit laïus entre les guillemets d'un title"..." peut donner la sensation de murmurer à l'oreille du lecteur. Un peu comme une séance chez le psy ou au confessionnal... Là encore, ne pas abuser de confidences inutiles dans l'infobulle: ça n'est surtout pas une place à réserver à ce que l'on n'ose pas écrire directement dans l'article, et le contenu d'une infobulle doit être tout aussi soigné et cohérent que le contenu de l'article lui-même. (Il est d'ailleurs reconnu comme un élément textuel par les moteurs de recherche.)

Personnalisation d'une infobulle:

Par défaut, l'infobulle apparait avec une fonte de base et un fond neutre. Il est possible de changer son apparence en accédant au code CSS HTML de son modèle. Mais comme pour la personnalisation du formulaire de commentaires blogger, c'est une opération beaucoup plus complexe que la simple utilisation de la balise title"...". Les aventureux trouveront sans doute des pistes dans des blogs d'aide blogger plus pointus.

Conclusion:

Enfin s'achève cet article interminable (c'est toujours difficile, pour moi, de rédiger des articles qui comportent des balises: on ne voit pas ce que l'on écrit car il faut les coder). Je crois que je vais cesser pour un temps les tutoriels!

Une mention particulière pour Marc, du blog Pyramidales qui m'a fait réfléchir à un moyen de donner des définitions de mots scientifiques parfois employés dans mes articles, puis qui m'a ensuite lancée sur la piste des infobulles grâce auxquelles mon problème de définition est résolue. Désormais, exuvie, odonate, et autre lépidoptère prendront tout leur sens grâce à un petit title="..." par-ci par-là: simple, rapide, efficace et qui n'apparait que pour ceux que ça intéresse.

Enfin, cet article traduit ma propre expérience en matière d'infobulles, sans prétendre être exhaustif sur le sujet.
___________________________________________________________________
Articles liés: Ces articles peuvent vous intéresser:

• Utiliser des balises dans les commentaires (initiation débutant)
  
• Liste de sites et blogs d'aide à la personnalisation de son blog

• Insérer un nuage de tags dans un blog blogger
• Créer son blog blogger (débutant)
  
• Insérer une image de grande taille dans un article Blogger
• De nouvelles couleurs de police pour votre article
• Les gadgets blog blogger: fonction et utilisation
• Créer des catégories en plus des libellés avec un blog blogger
• Un modèle (template) blog blogger à télécharger