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.

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

OR

$ 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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >

 

 

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';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  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:

<button 
    type="button" 
    class="btn btn-outline-secondary mr-2" 
    ngbTooltip="I am Bootstrap Tooltip">
        Bootstrap Tooltip
</button>

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"

<button 
    type="button" 
    class="btn btn-outline-secondary mr-2" 
    ngbTooltip="Bootstrap Tooltip on Rigth"
    placement="right"
    >
        Bootstrap Tooltip
</button>

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" 
[ngbTooltip]="tipContent"
>
    I've got markup and bindings in my tooltip!
</button>

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
</a>

<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';

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

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

  constructor() { }

  showTooltip(){
    this.mytooltip.open();
  }

  hideTooltip(){
    this.mytooltip.close();
  }

}

 

Other Properties:

Here are some important properties:

• <strong>autoClose</strong>: 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
• <strong>closeDelay</strong>: Adds delay to closing by ms.
• <strong>openDelay</strong>: Adds delay to open by ms.
• <span class="token tag"><span class="token attr-name">[openDelay]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span></span>
• <strong>container</strong>: A selector to append the Tooltip container. Currently only supports “body“.
• <strong>disableTooltip</strong>: Boolean property to enable/ disable the tooltip.
• <strong>triggers</strong>: Custom manual triggers to control tooltip visibility.
• <strong>tooltipClass</strong>: 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;
}

 

Conclusion

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.