Touch Friendly Tooltip

Question

Qualcuno sa di un tip di strumento Jquery che include una soluzione per dispositivi mobili? Poiché lo stato Hover non funziona, suppongo di aver bisogno di qualcosa che funzioni anche sul clic. Forse si comporta come una casella modale al clic? Sto buttando roba qui. Non sono sicuro quale sia la soluzione migliore.

- Aggiornamento -

Mi piace molto la soluzione @Alveoli suggerito, ma ho finito per prendere una pugnalata a me stesso. Ho usato qTip come base e ho scritto un codice di Frankenstein per creare sia tooltip sensibili al tatto sia box modali mobili. Qualsiasi aiuto per l'ottimizzazione del codice sarebbe molto apprezzato. Ecco il violino ... http://jsfiddle.net/cssguru/NQRBT/

Answer 1

sto cercando la stessa cosa e trovato questa soluzione elegante:

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

Bonus è che su un cellulare e 'attacca' quando si tocca e scompare quando si tocca di nuovo.

Answer 2

Ho provato un'app e le sue descrizioni sono pigre. Ad esempio, un pulsante chiamato "Invia" viene visualizzato nell'interfaccia utente, quindi 3 secondi dopo, l'etichetta "Invia i tuoi dati al server" viene visualizzata sotto forma di suggerimento sotto il pulsante "Invia".

Considerando che i nuovi utenti hanno sempre bisogno di più tempo per completare le azioni, penso che sia un buon modo per implementare il suggerimento. Gli utenti senior non saranno disturbati mentre i nuovi utenti potrebbero vedere il tooltip dopo un po '.

Answer 3

Si potrebbe utilizzare jQuery UI Tooltip e assicurarsi che il tooltip è chiuso il qualsiasi contatto con la pagina come segue:

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