How to use Bootstrap tooltips with Bootstrap cdn in Angular?-CodePudding

I have included bootstrap.min.css and bootstrap.min.js in index.html of my Angular project. I want to use Bootstrap tooltips but can't find a way to do so. How do I achieve it without having to do

npm install bootstrap

Element to add tooltip to:

<p data-bs-toggle="tooltip" data-bs-placement="bottom" title="Back to Previous Page"></p>

Index.html

<!doctype html>
<html lang="en">
<head>
  <!-- meta, title, etc -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

CodePudding user response：

From the Bootstrap official documentation:

Tooltips rely on the 3rd party library Popper.js for positioning.

You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js in order for tooltips to work!

https://getbootstrap.com/docs/4.1/components/tooltips/

CodePudding user response：

You need to install below packages in angular app.

npm install bootstrap jquery --save

Once these packages are installed you need to make below configuration in angular.json file. Prefer this way of importing external libraries instead of adding in index.html.

 "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/spinnerapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]
          },

Include jquery.js and bootstrap.bundle.min.js in the scripts array. Please note bootstrap.bundle.min.js by default contains popper.js. So no need to include it separately.

Now you can use jquery to call tooltip function from bootstrap as shown below. Please note how to include jquery in app.component.ts.

declare var $: any;

import { Component } from '@angular/core';
import { SpinnerService } from './services/spinner.service';
import { UserService } from './services/user.service';
declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'spinnerapp';
 
  showSpinner = false;

  constructor() {
    
  }

  ngOnInit() {
    $(document).ready(function() {
      $('[data-toggle="tooltip"]').tooltip();
    })
  }
}

<h2>Tooltip</h2>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
    Tooltip on top
  </button>

Refer complete example below.

Tooltip Bootstrap Code