スクロール可能なリストにポップオーバーを表示させる方法は？

Question

ブートストラップ3のポップオーバーに問題があります。<ul>タグのリストに写真のように通知を表示しています。

しかし<ul>をスクロール可能にする私は以下のようにそれにいくつかのCSSを適用：

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

スクロールがperfecly取り組んでいるが、overflow-x属性は、同様にポップオーバーのコンテンツを隠しています。ポップオーバーでoverflow-xを上書きしようとしましたが、機能しませんでした。私もz-indexを試しましたが、成功しませんでした。

誰もこの問題を解決する方法はありますか？前もって感謝します。

Answer 1

placementを右に設定するか、.scrollable-menuにoverflow-x: visibleを設定します。

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：あなたはこのようbodyにポップオーバーを追加することができ

：

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

を入力し、z-indexをハイレベルに設定します。

Answer 2

私は@ Damon.sのような指令を更新してくれて、完璧に働きました。

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