How to Use Bootstrap5 Tooltip in Angular 12

{tocify} $title={Table of Content}

Install and Configure Bootstrap

My current bootstrap version is 5.0.2.

yarn add bootstrap

Add "./node_modules/bootstrap/dist/css/bootstrap.min.css" to architect -> build -> styles of angular.json.

Result like this:

angular.json"styles": [
  "src/styles.scss",
  "./node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Create and using Tooltip Bootstrap

app.component.html<button 
  class="btn btn-primary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="right"
  title="I'm a Tooltip!">
  Hover me!
</button>

Method 1: Using JQuery

Install JQuery:

yarn add jquery

Add "./node_modules/jquery/dist/jquery.min.js" to architect > build > scripts of angular.json.
Add "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" to architect > build > scripts of angular.json to be able to call .tooltip() function.

angular.json"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Initializing all tooltips for our Angular application:

app.component.tsimport { Component, OnInit } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent implements OnInit {
  ngOnInit() {
    $('[data-bs-toggle="tooltip"]').tooltip();
  }
}

Method 2: Initializing tooltips via Vanilla JavaScript with Bootstrap 5

Bootstrap 5 has removed jQuery as a dependency, has dropped support for Internet Explorer 9 and 10, and brings some awesome updates for the Sass files, markup, and a new Utility API. Howerver, you can still use jQuery as the method 1 that I showed above to initialize tooltips.

In Bootstrap 5, I recommend using Vanilla JavaScript if the only reason you've been using jQuery was for the query selector, because you can do the same thing with the document.querySelector('#element') as if it was $('#element').

This lets you save up to 85 KB of data and makes your website faster!

Install @types/bootstrap to be able to import bootstrap in Angular

yarn add @types/bootstrap

Enable tooltips everywhere:

app.component.tsimport { Component, OnInit } from '@angular/core';
import { Tooltip } from 'bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent implements OnInit {
  ngOnInit() {
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    tooltipTriggerList.map(function (tooltipTriggerEl) {
      // return new Tooltip(tooltipTriggerEl);
      return new Tooltip(tooltipTriggerEl, {
        placement: 'right',
        trigger: 'hover'
      });
    })
  }
}

Bootstrap 5 depends on Popper.js Core, which is specified in the peerDependencies property. This means that you will have to make sure to add it to your package.json. If you get error like this:
ERROR in ./node_modules/bootstrap/dist/js/bootstrap.esm.min.js
Module not found: Error: Can't resolve '@popperjs/core' in 'H:\learning-languages\fullstack-app\clients\angular-web\node_modules\bootstrap\dist\js'
Let's install @popperjs/core package to solve it:
yarn add @popperjs/core

Customize Tooltip

trigger: 'string' - It could be hover | focus | click | manual

const Default = {
  animation: true,
  template: '<div class="tooltip" role="tooltip">' +
              '<div class="tooltip-arrow"></div>' +
              '<div class="tooltip-inner"></div>' +
            '</div>',
  trigger: 'hover focus',
  title: '',
  delay: 0,
  html: false,
  selector: false,
  placement: 'top',
  offset: [0, 0],
  container: false,
  fallbackPlacements: ['top', 'right', 'bottom', 'left'],
  boundary: 'clippingParents',
  customClass: '',
  sanitize: true,
  sanitizeFn: null,
  allowList: DefaultAllowlist,
  popperConfig: null
}

You can get more detail in node_modules/bootstrap/js/src/tooltip.js

These options are optional, so you can set them on HTML element.

Tips: To customize css of Tooltip, you should set trigger option is click. With this method, the tooltip will not disappear and you can use DevTools to style for tooltips.