我试图在我的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
可以正常工作。
我还有什么需要做的,我在这里失踪了吗?
答案 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;这样默认触发器设置为冥想点击,以便您能够正确检查元素