jquery UI araç ipucu html with links

Question

jquery UI araç ipucunu kullanmak istiyorum.

Araç ipucunda, html'de bir bağlantı olmasını istiyorum.

Bu ipucunu, araç ipucunun içinde html ile nasıl çalışacağını söyleyen (Jquery UI tooltip does not support html content) gördüm.

Ancak, araç ipucunun içine bağlantı eklemek istediğimde bir sorun var. Ben bağlantıyı tıklayarak için ipucuna girmek için imleç geldiğimde eleman araç ipucu atanan.

den mouseout çünkü

, araç ipucu (kayboldu ben

?

Teşekkür neler yapabilirsiniz.

Update:

$(function() { 
     $(document).tooltip({ 
      content: function() { 
       return $(this).prop('title'); 
      } 
     }); 
    }); 

Örnek: http://jsfiddle.net/jLkcs/

Answer 1

kutunun dışında mümkün değildir.

Bazı ipucu (jQuery forumunda bulunabilir, ancak bağlantı kesildi ...) ekleyerek araç ipucunun kapanmasını geciktirebilir ve bağlantıların tıklanma zamanını belirleyebilirsiniz.

Kullanılan API docs: http://api.jqueryui.com/tooltip/

Kodu:

$(function() { 
    $(document).tooltip({ 
     content: function() { 
      return $(this).prop('title'); 
     }, 
     show: null, 
     close: function (event, ui) { 
      ui.tooltip.hover(
      function() { 
       $(this).stop(true).fadeTo(400, 1); 
      },  
      function() { 
       $(this).fadeOut("400", function() { 
        $(this).remove(); 
       }) 
      }); 
     } 
    }); 
}); 

Demo: http://jsfiddle.net/IrvinDominin/jLkcs/5/

Answer 2

Ellerinizi kirletmeniz ve jQuery kodunu düzenlemeniz gerekecek gibi görünüyor, böylece mousout olayında araç ipucunun üzerinde dolaşıyorsanız kapanmıyor.

Ya da bir alternatif olarak twitter bootstrap araç ipucu ve popover bakmak olabilir, sanırım belleğe bir olay tetikleyici türü popover için geçirebilirsiniz. Çünkü jQuery UI ipucu niteliği

http://getbootstrap.com/2.3.2/javascript.html#popovers

Answer 3

Irvin Dominin kabul ettiği cevabı bu benim için büyük bir yardımcı oldu. Herhangi bir kişi benim sahip olduğum ek şartlara sahipse, genişledim.

Ayrıca araç ipucu ekranında gecikme yapmak istedim. "Show" seçeneği null olarak ayarlandığından, çoğaltmam gerekiyordu. (fare, araç ipucundan çağrıya geri döndüğünde açılan pencerenin görünür şekilde yeniden çizilmesini engellemek için show seçeneği null olarak ayarlanır).

Gelişmekte olduğum bir sayfa çok sayıda kullanıcı ipucuna sahip olduğundan ve anlık görüntü sayfa boyunca hareket ederken biraz sarsıcı olduğundan bir gecikme yapmam gerekiyor.

Çözümüm, araç ipucunu gizlemek ve tekrar görüntülemeden önce zaman aşımı eklemek için açık etkinliği kullanmaktı. Bunun istisnası, aynı araç ipucunun zaten açık olması ve bunu sıralamaktı. Bunu açarken/kapatırken her bir öğeye doğru/yanlış bir veri özniteliği ekledim (kaynak öğeyi açık ve kapalı işlevlerden almak kolay olmadı, ancak Bence haklı.

Sorumluluk reddi: JQuery'de uzman değilim ve bunu çoğaltmanın daha kolay bir yolu olabilir. Aşağıdaki kod kötü bir tavsiye olabilir bu yüzden ... Ben de çağıran bağlantıya bir ok koymak benim pop-up için bazı sınıfları ve konumlandırma eklendi

var ttWait; // global variable for tooltip delay 
$(document).tooltip({ 
    items: '.userSummaryLink', 
    show: null, 
    content: function() { // build the popup content 
     return $(this).prop('title'); 
    }, 
    open: function (event, ui) { // simulating the show option (that needs to be null to stop the popup closing and reopening when user mouses from popup back to source 
     var el = $(event.originalEvent.target); 
     if(!el.data('tooltip')) { // only put open delay if SAME popup not already open 
      ui.tooltip.hide(); // stop popup opening immediately 
      ttWait = setTimeout(function() { // show popup after delay 
       el.data("tooltip", true); // acknowledge popup open 
       ui.tooltip.fadeIn("400"); 
      }, 250); 
     } 
    }, 
    close: function (event, ui) { 
     var el = $(event.originalEvent.target); 
     el.data("tooltip", false); // acknowledge popup closed (might be over-ridden below) 
     clearTimeout(ttWait); // stop tooltip delay function 
     ui.tooltip.hover(
      function() { 
       $(this).stop(true).fadeTo(400, 1); 
       el.data("tooltip", true); // acknowledge popup still open 
      }, 

      function() { 
       $(this).fadeOut("400", function() { 
        $(this).remove(); 
       }); 
      }); 
    } 
}); 

Not bazen kod ile tavşan deliği aşağı takılıp. Ayrıca içeriğim, sayfaya yüklenen bir kullanıcı nesnesi dosyasından türetildi. Umarım kullanımı daha kolay hale getirmek için bunları kaldırdım.