Ng-bootstrap with angular 4 not showing tooltip

Question

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?

here ng-bootstrap.github.io/#/getting-started are the minimal versions dependencies...if you are using -v3.0 then you have to use angular -v6.0 — Aniket Avhad
– Aniket Avhad, Commented Aug 23, 2018 at 5:52
@AniketAvhad So does this mean i cannot use this with Angular 4? — UI Dev
– UI Dev, Commented Aug 23, 2018 at 6:01

BlizZard · Accepted Answer · 2018-08-23 11:01:01Z

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

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>

edited Aug 23, 2018 at 11:01

answered Aug 23, 2018 at 6:13

BlizZard

6016 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

UI Dev Over a year ago

How can i hide the tooltip after 2 seconds?

BlizZard Over a year ago

you want to show the tooltip on mouse-enter and want the tooltip to hide after 2 seconds? Is this what you need?

UI Dev Over a year ago

Yes thats right. It should hide after 2 seconds as well as hide when i move the mouse away from the icon

BlizZard Over a year ago

I have updated my answer as per your requirement, please let me know if the functionality is working or it need some more research.

UI Dev Over a year ago

But pop in pop.hide would be undefined in the .ts file right? How do i pass the reference

|

Collectives™ on Stack Overflow

Ng-bootstrap with angular 4 not showing tooltip

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related