mobile - navegador - opera mini para celular

Información sobre herramientas para navegadores móviles

Question

Actualmente configuro el atributo de title de algunos HTML si deseo proporcionar 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, un indicador visual para mover el mouse 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 del title 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

Como @cimmanon mencionó: 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 selección, puede agregar span[title] > * { user-select: none} span[title]:hover > * { user-select: auto }

Una solución completa puede usar algunas otras técnicas:

• Agregar position: absolute background position: absolute , border , box-shadow etc. para que parezca una información sobre herramientas.
• Agregue la clase touched al cuerpo (a través de js) cuando el usuario usa cualquier evento táctil. Entonces puedes hacer body.touched [title]:hover ... sin afectar a los usuarios de escritorio

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>

Answer 2

Dado que mucha gente hoy en día (2015) usa navegadores móviles, y el título todavía no ha encontrado 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 usarse 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, se debe encontrar otra forma de mostrarla a casi todos los usuarios.

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 para 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 w3c y de navegadores móviles 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 3

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

Específicamente, podría probar el complemento qTip jQuery, que tiene un modo modal disparado en $.click() :

Answer 4

El atributo de título no se admite en ningún navegador móvil ** de forma que muestre 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) *.
Es solo básicamente para usuarios de escritorio con mouse, teclado que solo los usuarios no pueden usar, o lectores de pantalla.

Puedes lograr casi lo mismo con javascript como dijiste.

Answer 5

Gracias a @flavaflo por su respuesta. Esto funciona en la mayoría de los casos, pero si hay más de un título para buscar en el mismo párrafo, y uno abre el enlace a otro, el enlace no abierto se muestra a través del primero. Esto puede resolverse cambiando dinámicamente el índice z del título que ha "aparecido":

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

Además, puede hacer que tanto el cursor sobre la pantalla como el clic en la pantalla muestren varias líneas agregando 
 (avance de línea) al título = '''' atributo, y luego convertir eso a <br /> para la pantalla html click:

$(this).append(''<span class="title">'' + $(this).attr("title").replace(///n/g, ''<br />'') + ''</span>'');

Answer 6

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

Javascript (hecho con 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;
}

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

Answer 7

Versión un poco más elaborada de la respuesta de flavaflo:

• Utiliza div predefinido como pop-up que puede contener HTML, en lugar de leer desde un atributo de título
• Se abre / cierra en rollover si se usa el mouse
• 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();
    });  

});

Demostración aquí https://jsfiddle.net/bgxC/yvs1awzk/