要在Angular 8中使用Bootstrap 4的工具提示,您需要执行以下步骤:
安装Bootstrap和jQuery:
npm install bootstrap jquery
在angular.json
文件中引入Bootstrap的CSS和JavaScript文件:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
在需要使用工具提示的组件中,导入ng-bootstrap
模块:
import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
在@NgModule
装饰器的imports
数组中添加NgbTooltipModule
:
@NgModule({
imports: [
NgbTooltipModule
],
...
})
在组件模板中使用工具提示:
这样,当用户将鼠标悬停在按钮上时,将显示一个工具提示。
请注意,以上代码示例假设您已经安装了ng-bootstrap
库。如果没有安装,请使用以下命令进行安装:
npm install @ng-bootstrap/ng-bootstrap