Touch Friendly Tooltip

Question

¿Alguien sabe de una herramienta de punta Jquery que incluye una solución para dispositivos móviles? Como el estado de desplazamiento no funciona, supongo que necesito algo que también funcione al hacer clic. Tal vez se comporta como un cuadro modal al hacer clic? Solo tirando cosas aquí. No estoy seguro de cuál sería la mejor solución.

- Actualización -

me gusta mucho la solución @Alveoli sugirió, pero terminó tomando una puñalada en ella misma. Usé qTip como mi base y escribí algunos códigos de Frankenstein para crear información sobre herramientas amigable al tacto y cajas modales amigables para dispositivos móviles. Cualquier ayuda para optimizar el código sería muy apreciada. Aquí está el violín ... http://jsfiddle.net/cssguru/NQRBT/

Answer 1

estoy en busca de lo mismo y encontré esta solución elegante:

http://osvaldas.info/blog/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

ventaja es que en un móvil que 'pega' cuando la toca y desaparece cuando la toca de nuevo.

Answer 2

Solía ​​probar una aplicación, y su información sobre herramientas está perezosa. Por ejemplo, un botón llamado 'Enviar' se muestra en la interfaz de usuario, y luego 3 segundos más tarde, la etiqueta 'Sumar datos al servidor' se muestra como una información sobre herramientas debajo del botón 'Enviar'.

Considerando que los usuarios nuevos siempre necesitan más tiempo para completar las acciones, creo que es una buena forma de implementar la información sobre herramientas. Los usuarios mayores no se molestarán, mientras que los usuarios nuevos podrán ver la información sobre herramientas después de un tiempo.

Answer 3

Usted podría utilizar jQuery UI Tooltip y asegúrese de que la información sobre herramientas está cerrado en ningún tacto en la página de la siguiente manera:

initTooltip = function ($el) { 
    var closeTooltipOnClick = function (e) { 

     // This code if for touch devices only. 
     // We want to tooltip to close, when we touch 
     // anywhere on the page, except if we touch on 
     // the link itself. 

     if ($(e.target).closest($el).size()) { 
      // We just clicked on the link, so let's 
      // not close the tooltip. 
      return; 
     } 

     $('body').off('touchend', closeTooltipOnClick); 
     $el.tooltip('close'); 
    }; 

    $el.tooltip({ 
     open: function() { 

      if (!Modernizr.touchevents) { 
       return; 
      } 
      // We make sure that the tootlip closes on 
      // touch devices if there is a touch event anywhere. 
      $('body').on('touchend', closeTooltipOnClick); 
     } 
    }); 
};