Bootstrap-Popovers für Tabellenzeilen-Hover: Nicht möglich, innerhalb von Popover auf Link zu klicken

Question

Ich habe Tabellenzeilen, in denen ich zusätzliche Informationen in einem Twitter-Bootstrap-Popover anzeigen kann.

Einige Anmerkungen aus dem Interaktionsdesign mit denen ich arbeite:

• Popovers muss angezeigt, wenn Sie die Zeile
• Popovers schweben 1 oder mehr Links
enthalten den Link

Jetzt, Teil ist der schwierige Teil. Wenn Sie die Maus von der Tabellenzeile zum Popover bewegen (das den Link enthält), verschwindet der Popover !

ich mit diesem Code die die popover erschaffe:

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

- die mit den Link relevanten HTML übernimmt erzeugt und setzen in data-content Attribut

Hinweis Dieses {placement: 'bottom' }. Um es zu ermöglichen, die Maus zum Popover zu bewegen, versuchte ich {placement: 'in bottom'} (hinzugefügt in Schlüsselwort, das popover dom Element innerhalb des Wählers erzeugt).

Problem ist für Tabellenzeilen, das ist nicht wirklich legal HTML-weise. Vielleicht ist das der Grund, warum placement: 'in bottom' noch hässlicher rendert: Das Popover klebt an den Anfang meines Ansichtsfensters.

meine Demo in My example on JSFiddle

Es die Beispiele enthält ...

Meine Frage ist, wie soll ich definieren meine popover, so dass es möglich ist, die Links klicken - angesichts der Beschränkungen, die durch gesetzt das Interaktionsdesign?

Answer 1

Das Problem ist offensichtlich, dass das Popover tut, was es tun soll. Wenn Sie Popover an <tr> anhängen und das Popover auf Hover reagieren lassen - und das Popover unter der <tr> - Unterseite bleibt - können Sie den Inhalt des Popover nie erreichen.

Trigger: schweben kann leicht durch Trigger nachgeahmt werden: Handbuch auf diese Weise

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

einstellen Auslöser: Handbuch ermöglichen es uns, die popover Verhalten zu manipulieren. Die folgende Lösung fügt den mouseenter/mouseleave -Ereignissen eine kleine Verzögerung hinzu und überprüft dann, ob sich die Maus im Popover befindet (indem Ereignisse an das Popover selbst angehängt werden). Wenn sich die Maus in einem Popover befindet, wird kein neues Popover angezeigt, und das aktive Popover wird nicht ausgeblendet, selbst wenn in einem anderen <tr> ein mouseenter -Ereignis aufgetreten ist. Gespaltene 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); 
});