Dokunmaya Duyarlı Araç İpucu

Question

Mobil cihazlar için bir çözüm içeren bir JQuery araç ipucunu bilen var mı? Hover durumu çalışmadığından, sanırım tıklamada da çalışan bir şeye ihtiyacım var. Belki tıklatmada bir modal kutusu gibi davranır? Sadece buraya bir şeyler fırlatıyor. En iyi çözümün ne olabileceğinden emin değilim.

- Güncelleme -

Gerçekten @Alveoli önerdi, ama ben ona kendimi bir bıçak alarak sona erdi çözümü gibi. Üssümde qTip'i kullandım ve hem kolay hem de pratik dostu modal kutular oluşturmak için bazı Frankenstein'd kodları yazdım. Kodu optimize eden herhangi bir yardım büyük ölçüde takdir edilecektir. İşte keman ... http://jsfiddle.net/cssguru/NQRBT/

Answer 1

Ben aynı şeyi arıyoruz ve bu zarif çözüm buldum ediyorum:

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

Bonus mobil üzerine Dokunmadan zaman 'yapışır' ve tekrar dokunduğunuzda kaybolur olmasıdır.

Answer 2

Bir uygulamayı denedim ve araç ipuçları tembel dolu. Örneğin, UI'da 'Gönder' adı verilen bir düğme görüntülenir ve daha sonra 3 saniye sonra 'Verilerinizi sunucuya aktar' etiketi 'Gönder' düğmesinin altında bir araç ipucu olarak görünür.

Yeni kullanıcıların, tamamlanmış eylemlere her zaman daha fazla zamana ihtiyacı olduğunu düşünürsek, bu, araç ipucunu uygulamak için iyi bir yol olduğunu düşünüyorum. Yeni kullanıcılar bir süre sonra araç ipucunu görebiliyorken, üst düzey kullanıcılar rahatsız edilmeyecek.

Answer 3

Sen jQuery UI Tooltip kullanabilir ve aşağıdaki gibi araç ipucu sayfasında herhangi touch kapalı olduğundan emin olun:

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