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

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

我很确定我已经包含了所有必需的 javascript，因为 ngbTooltip 确实有效。

还有什么我需要做的我在这里遗漏的吗？

Answer 1

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

PS。删除 triggers="mouseenter:mouseleave" 以便将默认触发器设置为 muse click 以便您能够正确检查元素

Answer 2

这已在最新版本 ng-bootstrap (1.0.0-alpha.18) 中得到解决。

运行

npm update @ng-bootstrap/ng-bootstrap

应该可以解决您的问题。

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

Answer 3

如果您不使用 Bootstrap 4 或 3，您可以简单地覆盖 ngb-popover-window 标签的默认 css 并设置文件 style.css 中的 css display 属性到 block !important 像这样：

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

它应该可以工作。

ngbPopover 没有出现

ngbPopover not showing up

twitter-bootstrap-3

ng-bootstrap

angular