2012-02-15 15 views
5

Twitter modunda Bootstrap kitaplığından popover nesnesini manuel modda kullanıyorum ve kullanıcı tıklattığında araç ipucunu kapatmaya nasıl başlayacağımı merak ediyordum.Kullanıcı, bir kullanıcı tıkladığında Bootstrap popover'ları (veya genel olarak herhangi bir öğe) nasıl kapatılır?

<a id="stats-bar" rel="popover" data-placement="top" data-trigger="manual" data-title="Title here" data-content="Hello everyone.">Test</a> 

ve benim JavaScript:: Kullanıcı yerde tıkladığında

$('#stats-bar').click(function(e) { 
     $(this).popover('show'); 
}); 

nasıl popover gizleyebilir ancak popover kendisi Burada

benim HTML'dir? Popletin arkasında sabit bir şeffaf div kullanmayı düşündüm ve tıklama olayını ayarladım ama bunun en iyi yol olduğundan emin değilim.

cevap

2

Poponun arkasında sabit bir şeffaf div kullanmayı ve tıklama etkinliğini en sağlam ve basit çözüm gibi göründüğü için ayarladım. Eğer ihtiyacınız olacak araç ipucunu göstermek için click olayı kadar manuel tetik seçeneği ve kablolama kullanıyorsanız

0

Vücutta nerede tıklattığınızı tetikleyen genel bir tıklama olayı dinleyicisi nedir? Bu gönderiye göz atın, elde etmeye çalıştığınız şeye benziyor. Eğer pop-up kapattığınızda

https://stackoverflow.com/a/2125122/1013422

Bunu, pop-up olay çalışmaya başladığında sadece işlevini tanımlarsınız fiili popover

$('#stats-bar').popover('hide') 

kapatıp sonra çıkarmak için bu kullanırsınız Tıklama olaylarını sürekli dinlemediğiniz şekilde.

6

Ben belge click olayı için kablolama kadar sona erdi ve bu noktada

 $(document).click(function (e) 
     { 
      // check the parents to see if we are inside of a tool tip. If the click came 
      // from outside the tooltip, then hide our tooltip 
      if ($(e.target).parents('.tooltip').length == 0) $('[data-original-title]').tooltip('hide'); 
     }); 

herhangi ipuçları gizlemek Araç ipucunu gösterirken belge tıklama olayının tetiklenmesini önlemek için e.stopPropagation() öğesini çağırmak.

+0

Yanıt bu olmalı, henüz gördüğüm en temiz ve en basit çözüm –

İlgili konular