Angular 12 ng-bootstrap | Tooltip Tutorial with Examples

In this Angular Bootstrap tutorial, we’ll learn how to add bootstrap tooltips in the Angular project by using the ng-bootstrap package.

This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 & Angular 12

Tooltips are used to provide information to users in a floating container with some textual content. Tooltips are generally used to show some extra or optional data on hover or click events triggered by users on a webpage.

What is ng-bootstrap?

In Angular projects having reactive approval to build dynamic web applications, we can’t use jQuery based Bootstrap components. The ng-bootstrap package is exclusively built for Angular projects using which we can easily use Bootstrap UI components in Angular very easily.

We’ll learn how to install the ng-bootstrap package in an Angular project, then learn how to use Bootstrap tooltips with various options in the Angular components.

You can check more tutorials on Angular + ng-bootstrap here.


Let’s get started!

Create a new Angular project

First, we will create a new Angular project. We will use the NG CLI tool to create our project.

Run following NPM command in Ng CLI terminal to create a new Angular project:

$ ng new ng-bootstrap-tooltip-demo
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS

Move to the project directory

$ cd ng-bootstrap-tooltip-demo

Run Angular project

$ ng serve --open


Install Bootstrap in Angular Project

To use Bootstrap UI components in an Angular project, we’ll install the ng-bootstrap package by hitting below ng add command

$ ng add --save @ng-bootstrap/ng-bootstrap


$ npm install @ng-bootstrap/ng-bootstrap


Note: The ng add the command will also update the app.module.ts file with NgbModule automatically.


ng-bootstrap includes UI components only, so for adding styling to these components we need to include CSS styling file in the index.html at Angular project root

  <link rel="stylesheet" href="" >



Update App Module

To use ng-bootstrap UI components in the application, we need to import the NgbModule in the main module.

If we use the ng add command the NgbModule will be auto-added in the imports array. Otherwise with npm install command we need to manually import it.

Open the app.module.ts file, then import NgbModule ( Bootstrap module ) & FormsModule ( for Angular as we will use [(ngModel)] ) .

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Adding Bootstrap Tooltip in Angular Project

The ngbTooltip property directive is used to show the default Tooltip on any element as shown below:

    class="btn btn-outline-secondary mr-2" 
    ngbTooltip="I am Bootstrap Tooltip">
        Bootstrap Tooltip

Tooltip Position

By default tooltip position is "auto". But we can change the position of Tooltip by adding the placement property:

placement: Tooltip position can be "top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right", "left", "left-top", "left-bottom", "right", "right-top" or "right-bottom"

    class="btn btn-outline-secondary mr-2" 
    ngbTooltip="Bootstrap Tooltip on Rigth"
        Bootstrap Tooltip

Custom Template with HTML in Tooltip

In the ngbTooltip property we can also pass a template variable of the ng-template element which can have HTML and data bindings.

<ng-template #tipContent>Hello, I am <i>{{type}}</i> <b>{{name}}</b>!</ng-template>

<button type="button" class="btn btn-outline-secondary" 
    I've got markup and bindings in my tooltip!

In component define variables for binding:

export class TooltipComponent implements OnInit {

  type = 'Freaky';
  name = 'Jolly';

Trigger Open/ Close Tooltip from Component

Here we will add template reference variable to tooltip element then show hide it from the component.

<a ngbTooltip="Triggered from component" tooltipClass="my-freaky-tooltip" #tt="ngbTooltip">
  Open/ Close Tooltip

<button (click)="showTooltip()">Show</button>
<button (click)="hideTooltip()">Hide</button>

In component, we will use @ViewChild to get tooltip reference of type NgbTooltip to use its open and close methods:

import { Component, ViewChild } from '@angular/core';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';

  selector: 'app-tooltip',
  templateUrl: './tooltip.component.html',
  styleUrls: ['./tooltip.component.css']
export class TooltipComponent {

  @ViewChild('tt', {static: false}) mytooltip: NgbTooltip;

  constructor() { }





Other Properties:

Here are some important properties:

  • autoClose: To handle tooltip close on ESC or inside/ outside click:                                                                     true – closes on inside, outside click or ESC keypress
    false – disables autoClose feature.
    inside” – closes on inside clicks and ESC key
    outside” – closes on outside clicks and ESC key
  • closeDelay: Adds delay to closing by ms.
  • openDelay: Adds delay to open by ms.
  • [openDelay]="300"
  • container: A selector to append the Tooltip container. Currently only supports “body“.
  • disableTooltip: Boolean property to enable/ disable the tooltip.
  • triggers: Custom manual triggers to control tooltip visibility.
  • tooltipClass: Adds custom class to tooltip container. ie. tooltipClass="my-freaky-tooltip"

.my-freaky-tooltip .arrow::before{
    border-top-color: red;
.my-freaky-tooltip .tooltip-inner{
    background-color: red;



For Tooltips in Angular project, ng-bootstrap is very easy to install and use in components. There are also many other useful UI components that can be used for enriching the user experience.

One Reply to “Angular 12 ng-bootstrap | Tooltip Tutorial with Examples

Leave a Reply

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