Angular 8/7 + ng-bootstrap | Tooltip Tutorial

In this tutorial, we will learn how to add bootstrap tooltips in Angular 8 project by using 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.

In Angular application, we can easily implement or show Tooltips using ng-bootstrap package it makes it very easy to use any of the Bootstrap UI components in an Angular project without any hectic procedure.

here we will create a new Angular project using latest NG CLI tool, then install ng-bootstrap to demonstrate the implementation of Tooltips with various useful options to customize the position and CSS styles.

Let’s get started!

Create a new Angular project

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

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

Install Bootstrap in Angular Project

Let’s install Bootstrap by running following NPM command. This will install the latest bootstrap version ( Current is 4.3.1 )

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

 

Import NgbModule ( Bootstrap module ) & FormsModule ( for Angular as we will use [(ngModel)] ) in the app.module.ts file

Use Bootstrap Tooltip in Angular Project

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

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"

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.

In component define variables for binding:

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

container: Selector to append the Tooltip container. Currently only supports “body“.

disableTooltip: Boolean property to enable/ disable tooltip.

triggers: Custom manual triggers to control tooltip visibility.

tooltipClass: Adds custom class to tooltip container. ie. tooltipClass="my-freaky-tooltip"

Trigger Open/ Close Tooltip from Component

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

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

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

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of