ngx-bootstrap tooltip not showing up in angular2

Question

I have an angular-cli application and need to include tooltip for a button here is my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {BenefitsManagementModule} from './benefits-management/benefits-management.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { AuthService } from './auth/auth.service';
import {AppRoutingModule} from './app-routing.module';
import { TooltipModule } from 'ngx-bootstrap';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BenefitsManagementModule,
    AppRoutingModule,
     TooltipModule.forRoot()
  ],
  providers: [
    AuthService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { };

here is my html for button

<div style="margin:0 auto; width: 65%; margin-top:3%;">
    <button type="submit"  
            [disabled]="!benefitScheduleForm.valid" 
            class="btn btn-md btn-primary" 
            style="float:left;"
            >Add
    </button>
    <button type="button" 
            tooltip="mytooltip"  
            class="btn btn-md btn-primary" 
            style="float:right;" 
            (click)="cancel()">Cancel</button>
</div>

Can anybody help me out?

whats the problem you are facing ??

Vikhyath Maiya
– Vikhyath Maiya

2017-09-01 12:35:32 +00:00
Commented Sep 1, 2017 at 12:35 — Vikhyath Maiya
– Vikhyath Maiya, Commented Sep 1, 2017 at 12:35
the tooltip not showing up

Priyanka Thakur Malve
– Priyanka Thakur Malve

2017-09-01 12:58:35 +00:00
Commented Sep 1, 2017 at 12:58 — Priyanka Thakur Malve
– Priyanka Thakur Malve, Commented Sep 1, 2017 at 12:58
can you produce a plunk for the same

Vikhyath Maiya
– Vikhyath Maiya

2017-09-01 13:06:22 +00:00
Commented Sep 1, 2017 at 13:06 — Vikhyath Maiya
– Vikhyath Maiya, Commented Sep 1, 2017 at 13:06
its angular-cli project

Priyanka Thakur Malve
– Priyanka Thakur Malve

2017-09-01 13:49:30 +00:00
Commented Sep 1, 2017 at 13:49 — Priyanka Thakur Malve
– Priyanka Thakur Malve, Commented Sep 1, 2017 at 13:49
doesnt matter,you will have angular seed project online

Vikhyath Maiya
– Vikhyath Maiya

2017-09-01 13:52:49 +00:00
Commented Sep 1, 2017 at 13:52 — Vikhyath Maiya
– Vikhyath Maiya, Commented Sep 1, 2017 at 13:52

Francesco Borzi · Accepted Answer · 2018-07-16 12:34:43Z

2

I was facing the same issue. The solution was to set the opacity property to 100.

.tooltip {
  opacity: 100;
}

edited Jul 16, 2018 at 12:34

Francesco Borzi

63.2k56 gold badges203 silver badges280 bronze badges

answered Oct 26, 2017 at 7:10

BezBran

1711 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

ngx-bootstrap tooltip not showing up in angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related