ngbPopover 没有出现答案

【问题标题】：ngbPopover not showing upngbPopover 没有出现
【发布时间】：2018-02-28 19:48:43
【问题描述】：

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

还有什么我需要做的我在这里想念的吗？

【问题讨论】：

如果不看更多代码就很难看到发生了什么。我准备了一个最小的、可工作的 plunk，您可能想将 plunk 中的代码与您的代码进行比较：plnkr.co/edit/BoTsvDAhIETBkU64JvLk?p=preview 一个想法 - 您确定您使用的是 Bootstrap 4？

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

【解决方案1】：

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

运行

npm 更新@ng-bootstrap/ng-bootstrap

应该可以解决您的问题。

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

【讨论】：

【解决方案2】：

如果您没有使用 Bootstrap 4 或 3，您可以简单地覆盖 ngb-popover-window 标签的默认 css 并将 css display 属性设置为 @文件style.css中的987654323@是这样的：

   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】：

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

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

【讨论】：

我也有同样的行为。弹出框以 display:none 样式出现在 DOM 中。我不明白为什么会这样？除了样式覆盖，我该如何解决？