Bootstrap popovers pour la rangée de table, passez la souris: Pas possible de cliquez sur le lien à l'intérieur de liste

Le problème est obvisously que la liste n'est ce qu'il est censé faire. Lorsque vous fixez les popovers à <tr>'s, et laissez-la liste de répondre à sustentation et la liste se bloque en dessous de la <tr>'s bas, vous ne serez jamais en mesure d'atteindre le contenu de la liste.

Déclencheur:hover peut être facilement imité par de déclenchement:manuel comme ce

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

Paramètre de déclenchement:manuel nous permettre de manipuler la liste des comportements. La solution ci-dessous ajoute un peu de retard à l' mouseenter /mouseleave-événements, et de vérifier ensuite si la souris est à l'intérieur de la liste (par la fixation des événements de la liste). Si la souris est à l'intérieur d'une liste, une nouvelle liste ne sera pas montré, et la liste ne sera pas caché, même s'il y a eu un mouseenter-événement dans une autre <tr>. Fourche 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);
});

OriginalL'auteur davidkonrad