angular6 使用tooltip

准备

为了使用tooltip，可以安装ng-bootstrap组件，它包含两个依赖：

• angular：5.0以上版本；
• bootstrap css： 4.0版本。

安装好bootstrap之后，更新angular.json文件

"styles": [   "node_modules/bootstrap/dist/css/bootstrap.min.css" ]

需要注意的是只能引入css文件，不能引入其他的js依赖，例如：bootstrap.js, jQuery, popper.js。


安装ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

引入到angular主模块中

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';   @NgModule({   ...   imports: [NgbModule, ...],   ... }) export class YourAppModule { }

在html文件中使用tooltip

<button type="button" class="btn btn-outline-secondary mr-2" placement="top" ngbTooltip="Tooltip on top">   Tooltip on top </button>