Les info-bulles pour les navigateurs mobiles

Selon la quantité d'informations que vous souhaitez donner à l'utilisateur, un modal de la boîte de dialogue pourrait être une solution élégante.

Plus précisément, vous pouvez essayer les qTip plugin jQuery, qui a un modal mode tiré sur $.click():

Comme @cimmanon mentionné: span[title]:hover:after { content: attr(title) } vous donne des rudiments d'info-bulle sur les appareils à écran tactile. Malheureusement, cela a des problèmes où le comportement de l'interface utilisateur par défaut sur les appareils à écran tactile est de sélectionner le texte lors de la non-link/uicontrol est pressé.

Pour résoudre le problème de sélection vous pouvez ajouter span[title] > * { user-select: none} span[title]:hover > * { user-select: auto }

Une solution complète peut recourir à d'autres techniques:

• Ajouter position: absolute background, border, box-shadow etc pour la faire ressembler à une info-bulle.
• Ajouter la classe touched à corps (via js) lorsque l'utilisateur utilise la touche de l'événement.
  Ensuite, vous pouvez faire body.touched [title]:hover ... sans affecter les utilisateurs d'ordinateurs de bureau

JS:

document.body.addEventListener('touchstart', function() {
  document.body.classList.add('touched');
});

CSS:

[title] {
	border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius:2px;
	position: relative;
}
body.touched [title] > * {
	user-select: none;
}
body.touched [title]:hover > * {
	user-select: auto
}
body.touched [title]:hover:after {
	position: absolute;
	top: 100%;
	right: -10%;
	content: attr(title);
	border: 1px solid rgba(0, 0, 0, 0.2);
	background-color: white;
	box-shadow: 1px 1px 3px;
	padding: 0.3em;
	z-index: 1;
}

HTML:

<div>Some text where a portion has a <span title="here's your tooltip">tooltip</span></div>

Étant donné que beaucoup de gens de nos jours (2015) utiliser les navigateurs mobiles, et le titre n'a pas encore trouvé une forme d'exposition dans les navigateurs mobiles, peut-être il est temps de rendre caduque la confiance sur le titre pour les informations significatives.

Il ne doit jamais être utilisé pour l'information critique, mais il est en train de devenir douteuse pour de l'information utile, parce que si cette information est utile et ne peut pas être montré que la moitié des utilisateurs, puis une autre façon de le montrer à presque tous les utilisateurs doit être trouvé.

Pour les pages statiques, peut-être certains de texte visible à proximité de contrôle, de même que les petits caractères. Pour le serveur de pages générées, browser sniffing pourrait fournir uniquement pour les navigateurs mobiles. Sur le côté client, en javascript peuvent être utilisés pour intercepter les événements de focus, via la formation de bulles, afin de montrer le texte suivant pour l'instant à la mise élément. Afin de minimiser l'espace de l'écran mais ne serait pas nécessairement être d'une grande utilité, car, dans beaucoup de cas, d'amener le focus à un contrôle ne peut être fait d'une manière qui active immédiatement son action, en contournant la possibilité d'en savoir plus avant de l'utiliser!

Plus de tout cela, il apparaît que les difficultés de montrer l'attribut title sur les appareils mobiles, peuvent le conduire à sa perte, en raison principalement besoin d'une alternative qui est plus universel. C'est dommage, parce que les mobiles pourrait utiliser un moyen d'afficher ces infos supplémentaires sur demande, sans prendre l'espace d'écran limitée.

Il semble étrange que le w3c et d'un navigateur mobile décideurs n'ont rien à propos de ce problème il y a longtemps. Ils auraient pu au moins affiche le titre du texte sur le menu qui s'affiche lorsqu'une pression longue sur un contrôle est effectué.

Personnellement, je souhaite qu'elle a été placée au sommet d'un clic-droit/long-appuyez sur menu, puisqu'il n'aura pas de délai d'attente, et sera accessible sur tous les navigateurs.

L'autre alternative est de créer des notes de bas de page, de sorte qu'un [n] type exposant est mis en regard de l'élément de texte/besoin de plus d'info, un lien vers un texte explicatif dans la liste au bas de la page. Chacun de ceux-ci peuvent avoir un semblable [n] type de lien vers le texte d'origine/élément. De cette façon, il maintient l'affichage épuré, mais permet de faciliter l'échange bidirectionnel d'une manière simple. Parfois, les vieux médias imprimés façons, avec un peu de lien hypertexte de l'aide, sont les meilleures.

L'attribut title a été détourné par certains navigateurs pour afficher un texte d'aide pour le modèle de l'attribut, en ce que son texte s'affiche si le modèle ne correspond pas au texte dans l'élément d'entrée. Généralement, c'est à donner des exemples de bon format.