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

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

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
szysz Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
szysz
Guest
szysz

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