Angular 8 bootstrap tooltip working example

Β·

,
How to make business template with Bootstrap 4 and Angular 9?

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 8 bootstrap tooltip working example
Angular 8 bootstrap tooltip working example

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.

Comments

8 responses to “Angular 8 bootstrap tooltip working example”

  1. Carlos Alonso Casales Ortega Avatar
    Carlos Alonso Casales Ortega

    Works perfectly πŸ˜πŸ‘

  2. Chethan Avatar
    Chethan

    Is there any order we have follow in styles and script while including nodeModules

  3. Ajay Malhotra Avatar

    You question is not clear to me.

  4. Vishnupriya Avatar
    Vishnupriya

    Perfect explanation. Thank you! But what if I want to add a content attribute in $(‘[data-toggle=”tooltip”]’).tooltip({ content: ‘Hooray’!}); and skip the title in the .html file? Will it still work?

  5. Ajay Malhotra Avatar

    Thank you an yes, you can try it.

  6. Pooja Avatar
    Pooja

    i am getting this error :TypeError: $(…).tooltip is not a function

  7. Ajay Malhotra Avatar

    You must missed something. Please check code again above.
    Thanks