Przysłony Bootstrap dla hover wiersza tabeli: Nie można kliknąć łącze wewnątrz popover

Question

Mam wiersze tabeli, w których wyświetlić dodatkowe informacje w popover programu startowego twitter.

Kilka uwag od projektowania interakcji pracuję z:

• Popovers musi pojawiają się po najechaniu rzędzie
• Popovers będzie zawierać 1 lub więcej linków

Teraz link część jest trudną częścią. Jeśli przesuniesz mysz z wiersza tabeli, do popover (który zawiera link), popover zniknie!

tworzę The popover z tym kodem:

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

- która zakłada istotne html w tym linku jest generowany i umieścić w data-content atrybutu

to zauważyć {placement: 'bottom' }. Aby umożliwić przeniesienie myszy na popover, wypróbowałem {placement: 'in bottom'} (dodano słowo kluczowe in, które generuje element popover dom wewnątrz selektora).

Problem dotyczy wierszy tabeli, co nie jest zgodne z prawem w rozumieniu HTML. Być może dlatego placement: 'in bottom' jest jeszcze bardziej brzydki: Popover przykleja się do górnej części mojej rzutni.

Spróbuj moje demo My example on JSFiddle

Zawiera ona przykłady ...

Moje pytanie brzmi: w jaki sposób należy określić mój popover, tak że możliwe jest kliknięcie łącza - biorąc pod uwagę ograniczenia stawiane przez projekt interakcji?

Answer 1

Problem polega na tym, że popover robi to, co powinien. Kiedy dołączasz popovers do <tr>, i pozwól popover odpowiedzieć na zawisanie - a popover zawiesza się pod dnem <tr> - nigdy nie będziesz w stanie osiągnąć zawartości popover.

wyzwalania: hover można łatwo naśladowane przez wyzwalacz: instrukcja jak to

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

funkcji wyzwalanych: manualna pozwala nam manipulować zachowanie popover. Poniższe rozwiązanie dodaje trochę opóźnień do zdarzeń, a następnie sprawdza, czy mysz znajduje się wewnątrz popover (przypisując zdarzenia do samego popover). Jeśli mysz znajduje się wewnątrz popover, nowy popover nie zostanie pokazany, a aktywny popover nie będzie ukryty, nawet jeśli w innym mouseenter -event istnieje inny mouseenter -event. Rozwidlony jsfiddle: http://jsfiddle.net/xZxkq/

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