Question

我试图在我的Angular2 / Typescript应用程序中使用ng-bootstrap（https://ng-bootstrap.github.io/#/components/popover）中的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, 
    ...

这几乎取自他们的示例网站。

我非常确定我已经收到所有必需的javascripts，因为ngbTooltip可以正常工作。

我还有什么需要做的，我在这里失踪了吗？

Answer 1

最新版本的ng-bootstrap（1.0.0-alpha.18）解决了这个问题。

正在运行

npm update @ ng-bootstrap / ng-bootstrap

应解决您的问题。

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

Answer 2

如果您没有使用 Bootstrap 4或3 ，则只需覆盖ngb-popover-window代码的默认css并设置 css {{1}如下所示，文件display中的block !important属性：

style.css

它应该有用。

Answer 3

在chrome dev控制台中查看正在渲染ngb-popup的元素，单击它并查看相关的css。取消选中.popup中的display：none样式后，您将能够看到弹出窗口。因此，它是一个CSS问题

PS。 remove triggers =＆＃34; mouseenter：mouseleave＆＃34;这样默认触发器设置为冥想点击，以便您能够正确检查元素

ngbPopover未显示

3 个答案: