ngbPopover没有显示出来

Posted 2021-05-05

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

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

答案

这在最新版本的ng-bootstrap（1.0.0-alpha.18）中得到了解决。

赛跑

npm update @ ng-bootstrap / bootstrap

应该解决你的问题。

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

另一答案

如果你没有使用Bootstrap 4或3，你可以简单地覆盖ngb-popover-window标签的默认css，并在文件display中将css 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;
   }

它应该工作。

另一答案

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

PS。 remove triggers =“mouseenter：mouseleave”，以便将默认触发器设置为muse click，以便您能够正确检查元素