Angular 8 | Add Hover Text Tooltip Module without any dependency in Angular web application

Tooltips play an important role to provide a more informative user-friendly interface. Tooltips are small information boxes which show up floating on a specific area to give some sort of textual information.

In Angular web applications also we may want to integrate tooltips on some key areas like icons, action buttons or to show full information, etc.

Here we will discuss the implementation of a very simple tooltip module in Angular application, which is independent of any other library or framework like jQuery or Bootstrap.

Also Check: Angular Bootstrap Modals Tutorial

So let’s get started!

First, make sure you have the latest version on NG CLI installed on your system. Run following command to update

Now we will create a new Angular project latest version 7. If you already have an Angular project just ahead with that.

Install ng2-tooltip-directive

We are going to use ng2-tooltip-directive npm module to show tooltips in the Angular project.

Install it by running following NPM command

Add Tooltip in App’s Module

After installation of tooltip package, we will import it in the app.module.ts file and also add in imports array as shown below

Use Tooltips in Application

Using tooltip is very simple, you only need to add tooltip directive in an element as shown below

Options can be added as a directive tag in the element itself

or provide an options object

We can also add HTML content in tooltips using templates


Check more details on property options available in docs here

Leave a Reply

2 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
2 Comment authors
aaaaaaszysz Recent comment authors
newest oldest most voted
Notify of

No dependency? so what is that? ng2-tooltip-directive


does not work for me. I did the tutorial but nothing happens when I hover the element