Ng-bootstrap with angular 4 不显示工具提示

Question

我正在使用 ng-bootstrap 3.0.0 和 angular 4 来显示悬停在图标上的 bootstrap 工具提示。但由于未知原因，工具提示不会在图标悬停时显示。这是我的代码：

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

我已将模块包含在 app.module 中：

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

我做错了什么？

Answer 1

您不能将 ng-bootstrap 用于 angular 4 项目。

但是，您可以使用 ngx-bootstrap，方法是从 npm install ngx-bootstrap@next 安装它并集成 ngx-bootstrap 工具提示，参考来自 ngx-bootstrap tooltip

ngx-bootstrap 支持添加了 @next 版本的 ngx-bootstrap(see the support here)

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

PopoverEnabled() {
      this.stopPopover();
}

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

并在 html 中使用，其中 div 您的工具提示代码为

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

Ng-bootstrap with angular 4 不显示工具提示

Ng-bootstrap with angular 4 not showing tooltip

tooltip

ng-bootstrap

angular