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>