首页 > 其他 > 详细

angular6 使用tooltip

时间:2019-06-16 00:32:55      阅读:191      评论:0      收藏:0      [点我收藏+]

准备

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!