Angular 9|8|7 + ng-bootstrap | Tooltip Tutorial with Examples

In this Angular Bootstrap tutorial, we’ll learn how to add bootstrap tooltips in the Angular 10/9/8 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>

Angular 9|8|7 + ng-bootstrap | Tooltip Tutorial with Examples

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>

Angular 9|8|7 + ng-bootstrap | Tooltip Tutorial with Examples

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

Angular 9|8|7 + ng-bootstrap | Tooltip Tutorial with Examples

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();
  }

}

Angular 9|8|7 + ng-bootstrap | Tooltip Tutorial with Examples

 

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"

Angular 9|8|7 + ng-bootstrap | Tooltip Tutorial with Examples

.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.

Subscribe
Notify of
guest
1 Comment
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Manjunath

HI, is there any way i can add line break for NgbTooltip content,