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

依赖关系此存储库包含一组本机Angular   指令基于Bootstrap的标记和CSS。结果没有   需要依赖于jQuery或Bootstrap的JavaScript。唯一的   必需的依赖项是：

Angular（需要Angular版本4或更高版本，使用4.0.3测试）

Bootstrap CSS（使用4.0.0-beta测试）

有关详细信息，请阅读：

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

Ng-bootstrap无法显示tootip

1 个答案: