Ng-bootstrap 无法显示工具提示

Question

我正在使用 ng-bootstrap 在我的 Angular 项目中显示工具提示。我无法显示工具提示。没有控制台错误。代码如下：

HTML

<button type="button" class="btn btn-outline-secondary" ngbTooltip="Tooltip">
  Customized tooltip
</button>

app.module.ts

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
imports: [
  NgbModule.forRoot()
]})
export class AppModule { }

Component

import { Component } from '@angular/core';
import {NgbTooltipConfig} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [NgbTooltipConfig]
})
export class AppComponent {
  constructor(config: NgbTooltipConfig) {
    config.placement = 'right';
    config.triggers = 'click';      
}

}

如何解决？

Answer 1

唯一的问题是，您忘记添加 css :

将此放入您的 index.html :

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Dependencies This repository contains a set of native Angular directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

Angular (requires Angular version 4 or higher, tested with 4.0.3)

Bootstrap CSS (tested with 4.0.0-beta)

更多详情，请阅读：

https://ng-bootstrap.github.io/#/getting-started

Ng-bootstrap 无法显示工具提示

Ng-bootstrap unable to display tootip

ng-bootstrap

angular