Angular 8 bootstrap tooltip working example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 bootstrap tooltiop working example.

Here is the updated Angular 12 Bootstrap 5 Tooltip working code snippet link : Angular 12 Bootstrap 5 Tooltip

Here you can check Angular 11 Bootstrap 4 Tooltip Working Demo with Code Snippet:

Angular and bootstrap combination is amazing. This will be also use in Angular 7 and Angular 8.

Here are the complete working steps and please follow carefully:

1. Here are the basics commands to install angular 8 on your system:

npm install -g @angular/cli 

ng new angularpopup //Create new Angular Project

$ cd angularpopup // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. After done with above, you need to run below commands to set bootstrap environment into your angular 8 application:

npm install --save bootstrap

npm install jquery --save

npm install --save @types/jquery

npm install popper.js --save

3. Now you need to add below code into your angular.json file:

...
"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": ["node_modules/jquery/dist/jquery.min.js", 
              "node_modules/popper.js/dist/umd/popper.min.js", 
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
...

4. Now you need to add below code into your src/app/app.component.ts file:

import { Component } from '@angular/core';
declare var $:any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() {
      $('[data-toggle="tooltip"]').tooltip();
  }
}

5. Now you need to add below code into src/app/app.component.html file:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

In the end, don’t forgot to run ng serve command. If you have any query then do comment below.

Jassa

Thank you.