2

我正在尝试在我的 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, 
    ...

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

我相当确定我已经将所有必需的 javascripts 都包含在了ngbTooltip工作中。

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

4

3 回答 3

3

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

跑步

npm 更新@ng-bootstrap/ng-bootstrap

应该可以解决您的问题。

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

于 2017-01-17T10:14:34.297 回答
3

如果您不使用Bootstrap 4 或 3，您可以简单地覆盖ngb-popover-window标签的默认 css 并将css display属性设置为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;
   }

它应该工作。

于 2018-02-28T11:48:43.207 回答
0

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

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

于 2016-10-10T12:09:00.703 回答