Wie mache ich ein Popover auf einer scrollbaren Liste sichtbar?

Question

Ich habe ein Problem mit einem Popover in Bootstrap 3. Ich habe eine Liste in <ul> Tag, wo ich die Benachrichtigungen wie auf dem Foto zeigen.

Aber die <ul> scrollbaren zu machen angewendet ich einige CSS auf sie unten wie:

.scrollable-menu { 
max-height: 25em; 
overflow-x: hidden; 
} 

Scrolling arbeitet perfecly aber das overflow-x Attribut wird die popover Inhalt als auch versteckt. Versucht, die overflow-x auf dem Popover zu überschreiben, hat aber nicht funktioniert. Ich versuchte z-index auch, aber kein Erfolg ...

Hat jemand irgendeine Idee, wie man dieses Problem löst? Danke im Voraus.

Answer 1

Sie können placement nach rechts setzen oder overflow-x: visible für .scrollable-menu einstellen.

in html:

<a href="#" data-toggle="popover" data-placement="right" data-trigger="hover" data-content="Content">Hover</a> 

js:

$('.popover').popover({ 
    trigger:'hover', 
    placement: 'right' 
}); 

UPDATE:

$('.popover').popover({ 
    container : 'body' 
}); 

:

Sie die popover zu body wie folgt anhängen

und z-index auf hohes Niveau setzen.

Answer 2

Ich aktualisierte die Direktive wie @ Damon.s riet mir und arbeitete perfekt.

$(el).popover({ 
     trigger: 'hover', 
     html: true, 
     container: 'body', 
     content: '<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>', 
     placement: 'bottom' 
});