ngbPopoverが表示されない

Question

Angular2/Typescriptアプリでng-bootstrap（https://ng-bootstrap.github.io/#/components/popover）のポップオーバーを使用しようとしています。

エラーがないのにまだポップオーバーが表示されていないので、私はどのように質問するのか分かりません。

これは私が持っているコードです：

<div ngbPopover="You see, I show up on hover!" 
     placement="top" triggers="mouseenter:mouseleave" title="Pop title"></div> 

そして、これは私のアプリの設定である：ほとんど自分のサンプルサイトから取得され

import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     HomeComponent, 
     DependenciesComponent, 
     TraceChartComponent 
    ], 
    imports: [ 
     NgbModule, 
    ... 

。

ngbTooltipとして機能するために必要なすべてのJavaScriptが含まれているとはかなり確信しています。

私はここで行方不明になっている必要がありますか？

Answer 1

これは最新のng-bootstrap（1.0.0-alpha.18）で解決されました。

ブートストラップNG-/

NPM更新@ ngのブートストラップは、あなたの問題を解決する必要があります実行しています。

https://github.com/ng-bootstrap/ng-bootstrap/commit/60fd5d954cff7aa982dd328845689c039251ffe2

Answer 2

chromeの開発コンソールで、ngb-popupをレンダリングしている要素を見て、それをクリックして関連するcssを参照してください。 .popupにnoneスタイルが指定されていれば、ポップアップが表示されます。 したがって、そのcssの問題

PS。トリガーを削除する= "mouseenter：mouseleave"これで、デフォルトのトリガーがミュートするように設定され、要素を正しく検査できるようになります。

Answer 3

あなたはブートストラップ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; 
    } 

これはうまくいくはずです。