Tablo satırı vurgulu için Bootstrap popover'ları: Popup içindeki bağlantıyı tıklamak mümkün değil

Question

Bir twitter bootstrap popover'ında ek bilgileri gösterdiğim tablo satırlarım var.

Birlikte çalıştığım etkileşim tasarımından birkaç not:

• Popovers Eğer
• Popovers 1 veya daha fazla bağlantı Şimdi

içerecektir Satırı getirdiğinizde yukarı göstermelidir, bağlantı Kısmen zor kısmıdır. Fareyi tablo satırından (bağlantıyı içeren) popover öğesine taşırsanız, popover kaybolur!

Bu kod ile popover oluşturma:

var options = {placement: 'bottom', trigger: 'hover', html: true}; 
$(this).popover() 

- üretilip

Bildirimi Bu {placement: 'bottom' }data-content özelliğinde konur linke dahil olmak üzere ilgili html varsayar. Fareyi popover'a taşımayı mümkün kılmak için {placement: 'in bottom'} (seçicideki popover dom öğesini oluşturan in anahtar sözcüğü ekledim) denedim.

Sorun, tablo satırları içindir, bu gerçekten yasal HTML-bilge değildir. Belki de bu yüzden placement: 'in bottom' daha da çirkin bir şekilde ortaya çıkıyor: Popover, görünümümün üstüne yapışıyor.

Bu örnekler içerir My example on JSFiddle benim demo deneyin ...

Benim sorum bağlantıları tıklayın mümkün olduğunu bu yüzden, benim popover tanımlamalıdır nasıl - tarafından belirlenen sınırlamalar verilen etkileşim tasarımı?

Answer 1

Sorun, popover'in yapması gereken şeyi yapmasıdır. Pop-up'ları <tr> 'a eklediğinizde ve popover'ın hover'a yanıt vermesine izin verdiğinizde - ve popover <tr>'un alt kısmının altına takılırsa - popletin içeriğine asla ulaşamazsınız.

Tetik: hover kolayca tetikleyici tarafından taklit edilebilir: Bu

$('table').on('mouseenter', 'tr', function() { 
    $(this).popover('show'); 
}); 
$('table').on('mouseleave', 'tr', function() { 
    $(this).popover('hide');  
}); 

Ayar tetik gibi manuel: manuel popover davranışını işlemek etmemizi sağlar. Aşağıdaki çözüm, mouseenter/mouseleave -eventlerine biraz gecikme ekler ve sonra farenin popover içinde olup olmadığını (olayları popover'e ekleyerek) kontrol eder. Fare bir popover içerisindeyse, yeni bir popover gösterilmeyecek ve mouseenter başka bir <tr> ürününde olsa bile etkin popover gizlenmeyecektir. Çatallaşmış jsfiddle: http://jsfiddle.net/xZxkq/ belki

var insidePopover=false; 

function attachEvents(tr) { 
    $('.popover').on('mouseenter', function() { 
     insidePopover=true; 
    }); 
    $('.popover').on('mouseleave', function() { 
     insidePopover=false; 
     $(tr).popover('hide'); 
    }); 
} 

$('table').on('mouseenter', 'tr', function() { 
    var tr=$(this); 
    setTimeout(function() { 
     if (!insidePopover) { 
      $(tr).popover('show'); 
      attachEvents(tr); 
     } 
    }, 200); 
}); 

$('table').on('mouseleave', 'tr', function() { 
    var tr=$(this); 
    setTimeout(function() { 
     if (!insidePopover) $(tr).popover('hide'); 
    }, 200); 
});