Affichage d'une fenêtre au passage de la souris

[kairaut1]

Bonjour,

Dans le cadre d'un projet professionnel, il nous a été demandé de créer un document sur lequel, lors du passage de la souris sur certaines zones, une fenêtre s'affiche avec une explication détaillée de la zone en question.

L'objectif étant de l'insérer sur l'intranet de notre entreprise

 

Je voulais savoir si c'était possible et si c'était "simple" à réaliser?

 

Merci beaucoup

[Dylav]

Bonjour kairaut, et bienvenue sur Zébulon !

Je distinguerai trois types de zones à documenter par une infobulle, image, lien hypertexte, autre zone.

L'image

<img src="URL-de-l-image" alt="texte alternatif" title="texte explicatif">

L'attribut alt donne un texte alternatif au cas où l'image ne peut pas être vue (URL inconnue, utilisateur malvoyant). La présence de cet attribut est obligatoire, son contenu peut (doit) être vide (alt="") si l'image n'a qu'une valeur décorative.
L'attribut title dévoile un texte explicatif lorsque l'image est survolée par la souris. Les experts s'opposent sur la pertinence d'utiliser cet attribut pour une image...

Le lien hypertexte

<a href="URL-cible-du-lien" title="texte explicatif">Lien hypertexte</a>

L'attribut title dévoile un texte explicatif lorsque le lien est survolé par la souris. Les experts s'accordent pour dire que le texte explicatif ne doit apparaître que si le lien lui-même n'explique pas suffisamment vers quelle cible il dirige.

Autre zone

 

La balise <abbr> est censée expliquer un acronyme (genre SNCF). L'acronyme est souligné en pointillés.

<abbr title="Société Nationale des Chemins de fer Français>SNCF</abbr>

On peut également utiliser l'attribut title pour une balise in-line (ce qui signifie que le texte conserve sa continuité, sans saut à la ligne intempestif) comme <span>.

Voici une phrase contenant un <span title="texte explicatif">mot</span> à expliquer.

Ceci permet d'associer une explication à un mot, ou même à un bout de phrase (à insérer entre <span> et </span>). À noter que le mot n'est distingué en rien du reste du texte, et que l'infobulle n'apparaît que si l'on survole par hasard le mot en question. Je serais alors tenté de suggérer de détourner l'usage de la balise <abbr> (avantage : le mot est souligné en pointillés), mais les dispositifs d'interprétation vocale fourniraient des explications peu cohérentes aux malvoyants.

 

Lire aussi

Coin des experts : bulles d'aide

Mettre des info bulle sur vos textes

[kairaut1]

Bonjour Dylav,

 

Merci beaucoup d'avoir pris le temps de répondre

Je vais tester tout ça

 

encore merci

 

Bonne journée

Kairaut

[Dylav]

À propos de la balise <span> que l'on survole par hasard, j'ai été un peu court. Il suffit en effet d'ajouter en CSS à cette balise des propriétés qui la démarquent visuellement. Par exemple en attribuant à son contenu une couleur de police différente de celle du reste du texte.

span {color:blue}

[Jocko]

Bonsoir,

 

Comme beaucoup d'éditeurs de page HTML insèrent des balises span à toutes les sauces... définir un attribut au niveau d'une feuille css à la balise span (sans id ou class) risque de ne pas mettre en avant la balise test.

 

Donc pour reprendre l'exemple de Dylav

Voici une phrase contenant un <span title="texte explicatif" style="color:blue;">mot</span> à expliquer.

Modifié le 16 mai 2017 par Jocko

[Dylav]

Bonsoir Jocko,

Ta remarque serait judicieuse si le professionnel qui nous demande conseil utilisait un éditeur de page HTML qu'il ne maîtriserait pas complètement... ce qui me surprendrait !

L'écriture que tu préconises, bien qu'admise, présente l'inconvénient de devoir rappeler l'attribut de couleur à chaque insertion d'une infobulle, ce qui est fastidieux. Ceci dit, sur un plan pratique, l'utilisation d'une classe (comme d'ailleurs tu l'évoques) ne ferait pas gagner beaucoup de caractères...

Voici une phrase contenant un <span title="texte explicatif" style="color:blue">mot</span> à expliquer.
Voici une phrase contenant un <span title="texte explicatif" class="blue">mot</span> à expliquer.

Néanmoins, elle permettrait de changer la couleur du span en un seul clic pour l'ensemble du site si le patron décidait qu'il préfère le vert au bleu ! Et là, c'est de la normalisation gagnant-gagnant...

.blue {color:green}

[Jocko]

Bonjour Dylav,

 

Effectivement le cadre de la demande m'avait échappé

 

Néanmoins je ne m'aventurerai pas sur le terrain "qualité du code HTML / développement professionnel". Lorsque je regarde le codage de certaines pages web d'applications professionnelles. C'est d'ailleurs un de mes critères pour évaluer des produits avec des fournisseurs...

 

Ma remarque ne s'entendait que le cadre d'une page HTML écrite rapidement avec les lignes proposées. Il est évident qu'il convient de proscrire des propriétés CSS avec l'attribut "style" en dur (d'où ma remarque "en l'absence d'une classe ou pseudo-classe")

 

Sinon dans le cadre d'un projet professionnel, je m'interroge si l'utilisation de l'attribut "title" est au niveau des attentes du client initial. Mais cela seul Kairaut1 peut le dire...

Modifié le 17 mai 2017 par Jocko

[Dylav]

Il est certain que l'on peut ensuite faire plus élaboré, avec de véritables pop-ups plus ou moins apprêtées, à l'aide de CSS3* et éventuellement JavaScript. Mais cela devient beaucoup plus délicat à coder (avec par la suite des difficultés éventuelles de maintenance), et ce n'est probablement pas indispensable dans un cadre professionnel, où l'on recherche plus l'efficacité que l'esthétisme. Le mieux est bien souvent l'ennemi du bien...

 

* voir par exemple Infobulle avec effet de transparence en CSS (CSS3 Create),

ou, plus compliqué, Des infobulles en CSS3 (Developpez),

etc.

[Jocko]

 

C'est exactement ce à quoi je pensais comme solution car elle permet d'apporter des explications détaillées et non limitées

Modifié le 17 mai 2017 par Jocko

[Dylav]

Remarques sur l'attribut title

• Il ne semble pas y avoir de limites à la longueur du texte explicatif.
  À titre d'exemple, j'ai fait un essai avec 2343 caractères.
• Si le texte s'avère trop long pour tenir sur une seule ligne sur l'écran,
  la bulle s'étire jusqu'au bord de l'écran, et le texte passe automatiquement à la ligne.
• On peut insérer des sauts à la ligne (line feed) : il suffit de sauter à la ligne dans le code source.

L'attribut title peut donc rendre de fiers services.

Néanmoins, il existe une sérieuse réserve sur son fonctionnement. En effet, si le survol du mot à expliquer peut s'effectuer sans problème à l'aide d'une souris (ou d'un TouchPad) sur un PC, il devient impossible sur une tablette ou un smartphone. Cette technique semble donc déconseillée, comme le soulignent les Recommandations du W3C.

Les autres solutions d'infobulles sont elles aussi à écarter, puisque se basant aussi sur un survol de souris.

Sur une tablette iPad, j'ai essayé le contact tactile sur le mot à expliquer. Il n'a aucun effet... c'est dommage.

Et je ne connais pas d'alternative.

Ceci dit, dans le domaine professionnel de kairaut, son document ne doit probablement être consulté que sur PC.