ng-bootstrapのポップオーバーが表示されない

Question

ng-bootstrapのポップオーバーがホバー上に表示されません。私はangangularでNgbModuleをインポートしました。

私がポップオーバーの上にマウスを置くと、本体に追加されますが、ディスプレイはnoneに設定されます。それは以下のCSSを使用します。

.popover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1060; 
    display: none; 
    max-width: 276px; 
    padding: 1px; 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size: 14px; 
    font-style: normal; 
    font-weight: 400; 
    line-height: 1.42857143; 
    text-align: left; 
    text-align: start; 
    text-decoration: none; 
    text-shadow: none; 
    text-transform: none; 
    letter-spacing: normal; 
    word-break: normal; 
    word-spacing: normal; 
    word-wrap: normal; 
    white-space: normal; 
    background-color: #fff; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0,0,0,.2); 
    border-radius: 6px; 
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); 
    box-shadow: 0 5px 10px rgba(0,0,0,.2); 
    line-break: auto; 
} 

私はこのようなWebPACKのブートストラップ含まれています：

const nonTreeShakableModules = [ 
    'bootstrap', 
    'bootstrap/dist/css/bootstrap.css'] 

しかし、それは表示されません。

私もindex.htmlにブートストラップを含めようとしましたが、ポップオーバーは表示されません。

次の週までにこのプロジェクトを完了する必要があります。

Answer 1

あなたはブートストラップ4または3を使用していない場合は、単にngb-popover-windowタグのデフォルトCSSをオーバーライドして、ファイル、このようなstyle.cssにblock !importantにCSSdisplayプロパティを設定することができます。

ngb-popover-window { 
    position: absolute; 
    width: auto !important; 
    display: block !important; 
    background-color: #fafafa !important; 
    border: 1px solid #fafafa !important; 
    max-width: none !important; 
}