私は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"これにより、デフォルトのトリガーがマウスをクリックするように設定され、要素を適切に検査できるようになります