ngbPopover未显示

时间:2016-09-15 08:13:26

标签: angular twitter-bootstrap-3 ng-bootstrap

我试图在我的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可以正常工作。

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

3 个答案:

答案 0 :(得分:2)

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

正在运行

  

npm update @ ng-bootstrap / ng-bootstrap

应解决您的问题。

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

答案 1 :(得分:2)

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

style.css

它应该有用。

答案 2 :(得分:0)

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

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