información sobre herramientas para navegadores móviles

Question

actualmente establece el atributo title de algo de HTML si quiero dar más información:

<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p> 

Luego, en CSS:

.more_info { 
    border-bottom: 1px dotted; 
} 

funciona muy bien, indicador visual para mover el mouse sobre y luego una pequeña ventana emergente con más información. Pero en los navegadores móviles, no entiendo esa información sobre herramientas. title atributos no parecen tener un efecto. ¿Cuál es la forma correcta de dar más información sobre un fragmento de texto en un navegador móvil? Igual que arriba pero use Javascript para escuchar un clic y luego mostrar un cuadro de diálogo que parece información sobre herramientas. ¿Hay algún mecanismo nativo?

Answer 1

Puede falsificar el comportamiento de la información sobre herramientas del título con Javascript. Cuando hace clic/tab en un elemento con un atributo title, se agregará un elemento secundario con el texto del título. Haga clic nuevamente y se eliminará.

Javascript (jQuery hecho con):

$("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; 
} 

Demostración: http://jsfiddle.net/xaAN3/

Answer 2

El atributo título no es compatible con cualquier navegador móviles ** en una forma que mostraría la información sobre herramientas igual que a los usuarios de mouse de escritorio ** * (el atributo en sí mismo es, por supuesto, compatible con el marcado) *.
Básicamente es para usuarios de escritorio con mouse, teclado que solo los usuarios no pueden usar, o lectores de pantalla.

Puede lograr casi lo mismo con javascript como usted dijo.

Answer 3

Dependiendo de la cantidad de información que desea dar al usuario, un cuadro de diálogo modal podría ser una solución elegante.

Específicamente, puede probar con el qTip jQuery plugin, que tiene un modo de modal disparado contra $.click():

Answer 4

Dado que muchas personas hoy en día (2015) utilizan navegadores móviles, y el título todavía hasn Encontré una forma de exposición en los navegadores móviles, tal vez es hora de desaprovechar la confianza en el título para obtener información significativa.

Nunca debe utilizarse para información crítica, pero ahora se está volviendo dudosa la información útil, porque si esa información es útil y no se puede mostrar a la mitad de los usuarios, otra forma de mostrarlo a casi todos los usuarios necesita ser encontrado.

Para páginas estáticas, tal vez algún texto visible cerca del control relevante, incluso como letra pequeña. Para las páginas generadas por el servidor, el rastreo del navegador podría proporcionar eso solo para los navegadores móviles. En el lado del cliente, javascript podría usarse para atrapar el evento de enfoque, a través del burbujeo, para mostrar el texto adicional junto al elemento actualmente enfocado. Eso minimizaría el espacio de la pantalla utilizado, pero no sería necesariamente de mucha utilidad, ya que, en muchos casos, enfocar un control solo puede hacerse de una manera que active inmediatamente su acción, evitando la capacidad de descubrir sobre eso antes de usarlo!

Sin embargo, parece que las dificultades de mostrar el atributo de título en los dispositivos móviles pueden llevar a su desaparición, principalmente debido a la necesidad de una alternativa que sea más universal. Es una lástima, porque los móviles podrían usar una forma de mostrar esa información adicional a pedido, sin ocupar el espacio limitado de la pantalla.

Parece extraño que los fabricantes de navegadores móviles y w3c no hayan hecho nada al respecto hace mucho tiempo. Al menos podrían haber mostrado el texto del título en la parte superior del menú que aparece cuando se realiza una pulsación larga en un control.

Answer 5

versión ligeramente más elaborado de la respuesta de flavaflo:

• Usos div pre-definido como pop-up que puede contener HTML, en lugar de la lectura de un atributo de título
• abre/cierra el vuelco si el ratón es usado
• Se abre al hacer clic (pantalla táctil) y se cierra al hacer clic en la ventana emergente abierta o en cualquier otro lugar del documento.

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(); 
    }); 

}); 

demo aquí https://jsfiddle.net/bgxC/yvs1awzk/

Answer 6

Como mencionó @cimmanon: span[title]:hover:after { content: attr(title) } le brinda una información sobre herramientas rudimentaria en dispositivos de pantalla táctil. Desafortunadamente, esto tiene problemas donde el comportamiento predeterminado de la interfaz de usuario en los dispositivos de pantalla táctil es seleccionar el texto cuando se presiona cualquier enlace no vinculado/uicontrol.

Para resolver el problema de la selección puede agregar span[title] > * { user-select: none} span[title]:hover > * { user-select: auto }

Una solución completa pueden utilizar otras técnicas:

• Añadir position: absolutebackground, border, box-shadow etc para que se vea como una información sobre herramientas.
• Agregue la clase touched al cuerpo (mediante js) cuando el usuario utilice cualquier evento táctil. A continuación, puede hacer body.touched [title]:hover ... sin afectar a los usuarios de escritorio

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

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

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