ngx-bootstrap 工具提示未显示在 Angular2 中

Question

我有一个 angular-cli 应用程序，需要包含按钮的工具提示 这是我的 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 { };

这是我的按钮 html

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

有人可以帮我吗？

Answer 1

我也面临着同样的问题。 解决方案是将不透明度属性设置为 100。

.tooltip {
  opacity: 100;
}

Answer 2

您使用的 Angular 版本是什么？

您在 Chrome /

ng serve

控制台中看到任何内容了吗？

这可能是由于 Angular 版本太旧造成的。确保您使用的是最新版本的 Angular（至少 4.x）和 ngx-bootstrap。

虽然 plunkr 确实会有所帮助，但我没有发现您发布的代码有任何问题。

cancel()

方法真的存在于你的组件中吗？

最好