码迷,mamicode.com
首页 > 其他好文 > 详细

angular6 使用tooltip

时间:2019-06-16 00:26:41      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:modules   使用   node   注意   export   style   imp   str   module   

准备

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

 

angular6 使用tooltip

标签:modules   使用   node   注意   export   style   imp   str   module   

原文地址:https://www.cnblogs.com/lucky-heng/p/11029308.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!