Question

我正在使用Angular 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>

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

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

我在这里做什么错了？

Answer 1

您不能对Angular 4项目read more here使用ng-bootstrap。

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

ngx-bootstrap支持与ngx-bootstrap（see the support here）的@next版本一起添加

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

PopoverEnabled() {
      this.stopPopover();
}

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

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

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

带角度4的Ng-bootstrap不显示工具提示

1 个答案: