5568 sujets

Sémantique web et HTML

[Résolu] Délais d'affichage des infobulles

À priori, le temps d'apparition de l'infobulle dépend du navigateur et sa durée d'affichage ne semble pas modifiable.

<a href="monfichier.php" title="blablabla">Hyperlien</a>
<abbr title="blablabla">Mot à définir</abbr>


L'infobulle sert en principe à afficher une courte explication au survol de la souris, et cette explication ne correspond finalement qu'à une sorte de note de bas de page comme on trouvait autrefois dans l'imprimerie papier, sauf qu'ici la note se situe sur le mot lui-même.

Parfois, l'explication devient un peu longue. N'existe-t-il donc pas un moyen détourné de prolonger la durée de cet affichage, où est-ce comme la touche info de la télécommande du téléviseur : tant pis si le texte trop long, il faut revenir dessus plusieurs fois ?

Merci pour votre aide.
Bonjour,

Non il n'existe pas de moyen de contrôler le temps ni la longueur de l'infobulle produite par l'attribut title.

Il faut te tourner vers une solution javascript.
Bonjour.

La comparaison entre un attribut title et une note de bas de page est hasardeuse. L'attribut title apporte une information courte et fortement corrélée au contenu, tandis que la note de bas de page peut contenir plusieurs paragraphes et être une digression complète. Il est intéressant de constater que sur Wikipédia, les notes de bas de page que l'on trouve dans une encyclopédie "papier" ont été remplacées par... des notes de bas de page, avec le confort de l'hypertexte en plus étant donné qu'une page correspond dans ce cas à un article.
Modifié par Julien Royer (14 Jun 2012 - 12:28)
Touché ! Smiley biggrin

L'idée initiale consistait effectivement à mettre en bas de page d'un livre numérique les notes de bas de page qu'on trouve en imprimerie traditionnelle. Je crois que cela est impossible puisque la longueur de chaque page du livre dépend des paramétrages de l'utilisateur. D'où cette question détournée avec le tooltype...

Du coup, je me demande comment faire ?
Administrateur
Bonjour,

Pyanepsion a écrit :
À priori, le temps d'apparition de l'infobulle dépend du navigateur et sa durée d'affichage ne semble pas modifiable.

Et son absence d'affichage pour les utilisateurs du clavier n'est pas non plus corrigée Smiley decu

Il existe des solutions JS pour ce qui est de l'affichage mais par contre bien conçues c'est déja plus rare Smiley ohwell

Sur le fond, title est un attribut à n'utiliser que sur les liens pour reprendre et compléter un intitulé qui serait en lui-même insuffisant. L'idéal est d'avoir un intitulé correct, pas de recourir à cette béquille.
title reste un attribut qui, comme alt, n'accepte que du texte brut. Ça doit rester simple et concis (quelques dizaines de caractères).

Pour un livre numérique, est-ce qu'il y a des liens ? Parce que s'il n'y a pas d'élément footnote, il y a par contre des hyperliens en HTML, c'est fait pour ça Smiley cligne L'exemple de Wikipedia déjà donné me semble bon : un lien vers un élément "identifié" (= avec un identifiant) et là du code HTML avec un lien retour. Et en CSS utilisation de :target pour surligner la zone visée, parce que le problème des ancres en bas de page est que le scroll "tombe pas en face" de l'id, la page va pas descendre plus bas que 100% pour positionner l'ancre en haut de la fenêtre ...
Et en parlant de notes de bas de page, un fameux article d'ALA sur l'ergonomie des liens à l'impression : http://www.alistapart.com/articles/improvingprint/
Felipe a écrit :
Et en CSS utilisation de :target pour surligner la zone visée, parce que le problème des ancres en bas de page est que le scroll &quot;tombe pas en face&quot; de l'id, la page va pas descendre plus bas que 100% pour positionner l'ancre en haut de la fenêtre ...

C'est un très bon exemple de l'utilisation de :target !
bonjour,

on peut toujours doublé l'infobulle avec un pseudo-élément et on aura pendant un moment les deux affichés.

On peut aussi ciblé un élément adjacent avec + ou ~ si il n'est pas frère direct. l’élément adjacent peut être plus loquace que l'infobulle (title).

Pour déterminer la durée d'affichage d'un élément adjacent, les animation avec keyframes sont adaptées.

L'affichage de l’élément adjacent peut-être déclenché via :hover et :focus sur un frère en amont.

Pour forcé un élément a accepté le focus via click ou tabulation, il suffit en principe de lui ajouter l'attribut tabindex.

Voici une page test sur tabindex (a parcourir en tabulant ou cliquant) : http://gcyrillus.free.fr/tabulation/focus-tabindex.html

C'est juste une autre piste.

Pour le défaut avec :target qui fait sauté la page, l’élément peut-être mis momentanément en position:fixed et affiché au bas de l’écran par exemple Smiley cligne .

Cordialement
Et si on veut innover un peu: des notes placées en marge (l'espace horizontal est bon marché sur le web), insérées au fil du contenu dans des éléments ASIDE. À creuser (mise en page, adaptation sur les écrans étroits, ergonomie...).

Enfin je dis «innover» mais on doit déjà en trouver des exemples.
Modifié par fvsch (14 Jun 2012 - 16:04)
@Felipe : un livre numérique peut comporter des liens. Ce sera généralement sur la table des matières. Quant aux notes, elles renvoient à la fin du document, ce qui en pratique les rend sans intérêt. JavaScript n'y fonctionne pas.

@GC Nomade : la routine ne fonctionne pas sous Internet Explorer et l'affichage est abimé. Sous iPad, cela ne fonctionne pas. Sous Chrome, le comportement diffère légèrement de Opera, Safari et Firefox. Dommage, car cela semble intéressant.

@Fvsch : les notes de côté de page existent déjà : cela se voit dans les livres de traduction, par exemple l'Iliade (littéralement le poème d'Ilion [l'autre nom de Troie]) et de même pour l'Odysée (littéralement [le chant] d'Ulysse). La moitié externe montre génralement la version originale, la moitié interne la version traduite ou les explications. La grande contraite porte alors sur la largeur disponible pour le contenu.
Modifié par Pyanepsion (14 Jun 2012 - 16:43)
Pyanepsion a écrit :

@GC Nomade : la routine ne fonctionne pas sous Internet Explorer et l'affichage est abimé. Sous iPad, cela ne fonctionne pas. Sous Chrome, le comportement diffère légèrement de Opera, Safari et Firefox. Dommage, car cela semble intéressant.


Ce n'est qu'une demo Smiley smile

Pour l'Ipad , je n'en possède pas, mais il me semble qu'il faut doublé :focus avec :hover . Ce n'est pas le cas dans la demo, sauf sur le simili menu déroulant qui devrait lui fonctionné.

Pour IE, il n'y a pas les transitions et aucune correction d'affichage pour IE8 , les valeurs positive de tabindex ne fonctionne pas non plus mais ce n'est pas essentiel.

Merki de ton retour
Cordialement
Je n'ai testé que sur la version 9 d'Internet Explorer. Sous iPad, rien ne fonctionne sauf rebus. Cela parait d'ailleurs logique.
Modifié par Pyanepsion (14 Jun 2012 - 17:01)
okay,
donc j'en déduit que tu ne peut t’appuyer que sur du lien pour que ce soit compatible avec Ipad ... :target et ou js.

bonne suite
Sujet clos
Aller à