Ng-bootstrap with angular 4 not showing tooltip

I am using ng-bootstrap 3.0.0 with angular 4 to show the bootstrap tooltip on hover over a icon. But for unknown reasons, the tooltip doesnt show up on hover of the icon.
This is my code:

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


I have included the module in app.module :

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


What am i doing wrong here?

1 Answer
1

You cant use ng-bootstrap for angular 4 project read more here.

But, you can use ngx-bootstrap by installing it from npm install ngx-bootstrap@next and integrating the ngx-bootstrap tooltip from taking reference from ngx-bootstrap tooltip

npm install ngx-bootstrap@next

The ngx-bootstrap support is added with a @next version of ngx-bootstrap(see the support here)

For closing the tooltip after 2 seconds, add two custom functions in .ts as

PopoverEnabled()
this.stopPopover();


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



and use in html , in which div you have the tooltip code as

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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.