angular6 使用tooltip

Posted 2022-01-13 lucky-heng

准备

为了使用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>