CODEWITHSUNDEEP
angulartooltipng-bootstrap
UI Dev
UI Dev

Reputation: 197

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?

Upvotes: 1

Views: 1796

Answers (1)

BlizZard
BlizZard

Reputation: 589

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>

Upvotes: 1

Related Questions