Chronique familiale




La chronique familiale pas à pas

Ajouter une infobulle



Nous allons donc voir comment réaliser une infobulle au passage de la souris sur un ou plusieurs mots.


 La balise <span>


La première étape consiste à insérer le(s) mot(s) concerné(s) dans une balise<span> qui nous permettra de passer nos consignes à son contenu grâce à l'attribut style. Comme ceci :

<span style="...">Ici le texte à expliquer</span>


 Modifier le curseur


Vous avez pu constater qu'au survol le curseur change d'aspect et que dans ce cas précis un point d'interrogation accompagne la flèche. Il faut pour ce faire utiliser la propriété cursor (qu'il n'est pas besoin de traduire), laquelle accepte plusieurs valeurs 1. Ici nous emploierons la valeur help :

<span style="cursor:help; ...">Ici le texte à expliquer</span>


Et ça fonctionne : Passez le curseur sur ce texte


 Souligner le texte


Il nous faut maintenant souligner le texte en pointillé 2, comme celui-ci : Texte souligné.

Nous allons nous servir de la propriété border-bottom3 avec la valeur dotted4 et une épaisseur de 1px :

<span style="cursor:help; border-bottom:dotted 1px;">Ici le texte à expliquer</span>


 Écrire dans l'infobulle


Nous avons appris à mettre un titre ↗ (une infobulle) à une image c'est-à-dire à un élément d'une page web. Nous allons employer ici aussi l'attribut title pour créer l'infobulle de notre texte :

<span style="..." title="Siège de l'Assemblée nationale">Palais Bourbon</span>

Voici le code complet :

<span style="cursor:help; border-bottom:dotted 1px;" title="Siège de l'Assemblée nationale">Palais Bourbon</span>


Mettez le curseur sur le texte qui suit pour voir le résultat : Palais Bourbon



Notez qu'il n'y pas moyen d'agir sur le format du texte dans l'infobulle, sachant que la présentation varie en fonction des navigateurs.

On ne peut donc pas provoquer un retour à la ligne et l'affichage d'une infobulle trop longue pouvant s'avérer disgracieux, il vaudra mieux les éviter. Si ce n'est pas possible, on utilisera plutôt les notes de bas de page plus adaptées à ce cas de figure.



 Notes

 
1. Pour les curieux, voici la liste des valeurs possibles : Formes du curseur ↗.
 
2. C'est une convention que de souligner les textes qui génèrent des infobulles avec des pointillés, tant en HTML que dans les pages Wiki.
 
3. border-top, border-right, border-bottom et border-left définissent respectivement la bordure haute, droite, basse et gauche d'un élément.
 
4. Nous avions vu dans les bordures de tableau ↗ quelles sont les valeurs qui déterminent l'aspect de ces dernières.



───── oOo ─────


Index des pages