Info-bulles pour les navigateurs mobiles
Je définis actuellement l'attribut title de certains codes HTML si je souhaite fournir davantage d'informations:
<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p>
Puis en CSS:
.more_info {
border-bottom: 1px dotted;
}
Fonctionne très bien, indicateur visuel pour déplacer la souris puis un petit popup avec plus d’informations. Mais sur les navigateurs mobiles, je n'ai pas cette info-bulle. Les attributs title ne semblent pas avoir d'effet. Quelle est la bonne façon de donner plus d'informations sur un morceau de texte dans un navigateur mobile? Idem que ci-dessus mais utilisez Javascript pour écouter un clic, puis affichez une boîte de dialogue ressemblant à une info-bulle? Existe-t-il un mécanisme natif?
Vous pouvez simuler le comportement des info-bulles de titre avec Javascript. Lorsque vous cliquez sur/tab sur un élément avec un attribut title, un élément enfant avec le texte du titre sera ajouté. Cliquez à nouveau et il est supprimé.
Javascript (fait avec jQuery):
$("span[title]").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
} else {
$title.remove();
}
});
CSS:
.more_info {
border-bottom: 1px dotted;
position: relative;
}
.more_info .title {
position: absolute;
top: 20px;
background: silver;
padding: 4px;
left: 0;
white-space: nowrap;
}
Version légèrement plus élaborée de la réponse de flavaflo:
- Utilise div prédéfini comme une fenêtre pouvant contenir du HTML, plutôt que de lire un attribut title
- Ouvre/ferme le survol si la souris est utilisée
- Ouvre en cliquant (écran tactile) et ferme en cliquant sur la fenêtre contextuelle ouverte ou n'importe où sur le document.
HTML:
<span class="more_info">Main Text<div class="popup">Pop-up text can use <b>HTML</b><div></span>
CSS:
.more_info {
border-bottom: 1px dotted #000;
position: relative;
cursor: pointer;
}
.more_info .popup {
position: absolute;
top: 15px; /*must overlap parent element otherwise pop-up doesn't stay open when rolloing over '*/
background: #fff;
border: 1px solid #ccc;
padding: 8px;
left: 0;
max-width: 240px;
min-width: 180px;
z-index: 100;
display: none;
}
JavaScript/jQuery:
$(document).ready(function () {
//init pop-ups
$(".popup").attr("data-close", false);
//click on pop-up opener
//pop-up is expected to be a child of opener
$(".more_info").click(function () {
var $title = $(this).find(".popup");
//open if not marked for closing
if ($title.attr("data-close") === "false") {
$title.show();
}
//reset popup
$title.attr("data-close", false);
});
//mark pop-up for closing if clicked on
//close is initiated by document.mouseup,
//marker will stop opener from re-opening it
$(".popup").click(function () {
$(this).attr("data-close",true);
});
//hide all pop-ups
$(document).mouseup(function () {
$(".popup").hide();
});
//show on rollover if mouse is used
$(".more_info").mouseenter(function () {
var $title = $(this).find(".popup");
$title.show();
});
//hide on roll-out
$(".more_info").mouseleave(function () {
var $title = $(this).find(".popup");
$title.hide();
});
});
Démo ici https://jsfiddle.net/bgxC/yvs1awzk/
Comme @cimmanon l'a mentionné: span[title]:hover:after { content: attr(title) } vous donne une info-bulle rudimentaire sur les appareils à écran tactile. Malheureusement, cela pose des problèmes lorsque le comportement par défaut de l'interface utilisateur sur les périphériques à écran tactile consiste à sélectionner le texte lorsque l'utilisateur n'appuie pas sur un lien/uicontrol.
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 utiliser d'autres techniques:
- Ajoutez
position: absolutebackground,border,box-shadowetc. pour le faire ressembler à une info-bulle. - Ajoutez la classe
touchedau corps (via js) lorsque l'utilisateur utilise un événement tactile . Vous pouvez ensuite effectuerbody.touched [title]:hover ...sans affecter les utilisateurs du bureau.
document.body.addEventListener('touchstart', function() {
document.body.classList.add('touched');
});[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;
}<div>Some text where a portion has a <span title="here's your tooltip">tooltip</span></div>Étant donné que beaucoup de gens utilisent actuellement des navigateurs mobiles (2015) et que le titre n'a toujours pas trouvé une forme d'exposition dans les navigateurs mobiles, il est peut-être temps d'abandonner le recours au titre pour obtenir des informations utiles.
Il ne devrait jamais être utilisé pour des informations critiques, mais il devient douteux pour des informations utiles, car si ces informations sont utiles et ne peuvent pas être montrées à la moitié des utilisateurs, il faut trouver un autre moyen de les montrer à presque tous les utilisateurs.
Pour les pages statiques, peut-être du texte visible proche du contrôle correspondant, même en petits caractères. Pour les pages générées par le serveur, la détection de navigateur ne peut en fournir que pour les navigateurs mobiles. Du côté du client, javascript pourrait être utilisé pour capturer l’événement de focus, via un bullage, afin d’afficher le texte supplémentaire à côté de l’élément actuellement ciblé. Cela minimiserait l'espace occupé à l'écran, mais ne serait pas nécessairement très utile, car dans de nombreux cas, la focalisation sur un contrôle ne peut être effectuée que de manière à activer immédiatement son action, en évitant la possibilité de le savoir. à ce sujet avant de l'utiliser!
Mais dans l’ensemble, il semble que les difficultés d’affichage de l’attribut title sur les appareils mobiles puissent conduire à sa disparition, principalement en raison du besoin d’une alternative plus universelle. C'est dommage, car les mobiles pourraient utiliser un moyen d'afficher de telles informations supplémentaires à la demande, sans occuper un espace d'écran limité.
Il semble étrange que les fabricants de w3c et de navigateurs mobiles n'aient rien fait à ce sujet il y a longtemps. Au moins, ils auraient pu afficher le texte du titre en haut du menu qui apparaît lorsque vous appuyez longuement sur un contrôle.
L'attribut title n'est pas pris en charge par les navigateurs mobiles ** de manière à afficher la même info-bulle que pour les utilisateurs de souris de bureau ** * (l'attribut lui-même est bien sûr pris en charge dans le balisage) *.
C’est essentiellement pour les utilisateurs de bureau équipés d’une souris, pour les utilisateurs uniquement au clavier, ou pour les lecteurs d’écran.
Vous pouvez obtenir presque similaire avec javascript comme vous l'avez dit.
Merci à @flavaflo pour leur réponse. Cela fonctionne dans la plupart des cas, mais s'il y a plus d'un titre à rechercher dans le même paragraphe et que l'un d'entre eux s'ouvre par-dessus le lien, le lien non ouvert apparaît dans le premier. Cela peut être résolu en modifiant dynamiquement l'index z du titre qui a "surgi":
$("span[title]").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
$(this).css('z-index', 2);
} else {
$title.remove();
$(this).css('z-index', 0);
}
});
En outre, vous pouvez créer l'affichage survolé et l'affichage multiligne en ajoutant (saut de ligne) à l'attribut title = '', puis de le convertir en <br /> pour l'affichage html:
$(this).append('<span class="title">' + $(this).attr("title").replace(/\\n/g, '<br />') + '</span>');