Enable Bootstrap Tooltip in Angular using Attribute Directive

Bootstrap is a popular CSS framework that provides a set of ready-to-use components and styles for building responsive web applications. In this article, we will explore how to enable Bootstrap Tooltip in an Angular application using an attribute directive.

Install Bootstrap:

npm install bootstrap 

Import Bootstrap SCSS in styles.scss:

// For Setting Project Specific Bootstrap Variable. Like $primary Color
@import "assets/scss/variables.scss";

// Import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap.scss";

// App Specific components
@import "assets/scss/app.scss";

Import Bootstrap Bundle JS in angular.json -> architect -> build -> options:

"scripts": [

Add bootstrap as a global variable in src/typings.d.ts

declare var bootstrap: any;

Now create a Directive TooltipDirective:


import { AfterViewInit, Directive, ElementRef, OnDestroy } from '@angular/core';

  selector: '[bTooltip]'
export class TooltipDirective implements AfterViewInit, OnDestroy {
  private tooltip: any;

  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit() {
    const domElement: HTMLElement = this.elementRef.nativeElement;
    this.tooltip = new bootstrap.Tooltip(domElement);

  ngOnDestroy(): void {


import { ElementRef } from '@angular/core';
import { TooltipDirective } from './tooltip.directive';

describe('TooltipDirective', () => {
  it('should create an instance', () => {
    const elementRefMock: ElementRef = {} as ElementRef;
    const directive = new TooltipDirective(elementRefMock);

Declare Tooltip directive in src/app/app.module.ts:

import { TooltipDirective } from './_components/tooltip.directive';

  declarations: [

Use the directive as below to create a tooltip:

<a class="btn btn-success" bTooltip title="Your Message">MyButton</a>

Now you will be able to use Tooltip with all it's attributes like data-bs-placement.

I think with similar approach you can use most of the Bootstrap components in Angular.

Stackoverflow Answer >

Leave a Reply

Your email address will not be published. Required fields are marked *

The reCAPTCHA verification period has expired. Please reload the page.