/ / ngbPopoverが表示されない - 角、twitter-bootstrap-3、ng-bootstrap

ngbPopoverが表示されない - 角、twitter-bootstrap-3、ng-bootstrap

私はng-bootstrapからpopoverを使用しようとしています(https://ng-bootstrap.github.io/#/components/popover)私のAngular2 / Typescriptアプリで。

私はエラーがないのに質問を述べる方法を知っていなくても、ポップオーバーは表示されません。

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

 <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,
...

サンプルのサイトからかなり得られたものです。

私はかなり必要なjavascriptをすべて持っていると確信しています ngbTooltip 仕事する。

私がここで行方不明にするために必要なことは他にありますか?

回答:

回答№1は1

これは、最新バージョンng-bootstrap(1.0.0-alpha.18)で解決されました。

ランニング

npm update @ ng-bootstrap / ng-bootstrap

あなたの問題を解決するはずです。

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


回答№2の場合は1

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

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

そしてそれはうまくいくはずです。


回答№3の場合は0

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

PS。 remove triggers = "mouseenter:mouseleave"これにより、デフォルトのトリガーがマウスをクリックするように設定され、要素を適切に検査できるようになります