带有角度 4 的 ng 引导程序不显示工具提示

Question

我正在使用带有角度 4 的 ng-bootstrap 3.0.0 在将鼠标悬停在图标上时显示引导工具提示。但由于未知原因，悬停在图标上时不会显示工具提示。 这是我的代码：

<div class="col-md-1" style="margin-left:20px;" placement="bottom" ngbTooltip="Import">
<input type="file" id="fileLoader" name="files" style="display:none" accept=".csv" (change)="uploadFileToDataManager($event)"
multiple/>
<div id="btnUpload" class="import-icon" tabindex="0" role="button">
<div style="margin-top:5px">
<span style="float:left;" class="importIconFont icon-cloud-import"></span>
<!--<a class="exportIconFont icon-cloud-export"></a>-->
<!--<span style="color:#263a47;font-family:ev;margin-left: 10px;">Upload</span>-->
</div>
</div>
</div>

我已经在应用程序模块中包含该模块：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [
],
imports: [
BrowserModule,
HttpClientModule,
HttpModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: []
})

我在这里做错了什么？

Answer 1

你不能将ng-bootstrap用于角度4项目，在这里阅读更多内容。

但是，您可以通过从npm install ngx-bootstrap@next安装ngx-bootstrap来使用它，并从ngx-bootstrap工具提示中集成ngx-bootstrap工具提示

ngx-bootstrap支持与 ngx-bootstrap 的@next版本一起添加(请参阅此处的支持(

要在 2 秒后关闭工具提示，请在 .ts 中添加两个自定义函数作为

PopoverEnabled() {
this.stopPopover();
}
stopPopover() {
setTimeout(() => {
pop.hide();
}, 2000);
}

并在 HTML 中使用，其中div 您将工具提示代码作为

<div (mouseenter)="PopoverEnabled()" (mouseleave)="stopPopover()"></div>