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.

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

Leave a Reply

avatar
  Subscribe  
Notify of