Integrating sg-tooltip in Angular Project

What is an Tooltip Component?

A tooltip component is a user interface (UI) element that displays extra information when a user interacts with a specific object, such as a button, icon, or text link. Tooltips are useful for providing more clarity to the user and can be used to describe the function of an element.

Here are the sg-tooltip Component options:

Animation Options:

sg-tooltip component integration in Angular Application

Step 1: Adding the component
Go to your root folder of your angular application and use the below command to add the package.

 npm i sg-tooltip

Your package.json will be updated with the component as shown below.

Step2: Configure the main.js file

Add an import to main.js

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

And somewhere near the bottom, we’ll call this function.

defineCustomElements();

your main.js file looks like this

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

import { defineCustomElements} from '../node_modules/sg-tooltip/loader';

platformBrowserDynamic().bootstrapModule(AppModule, {
  ngZoneEventCoalescing: true
})
  .catch(err => console.error(err));
  defineCustomElements(); 

Step3: Update the app.module.ts file

Next, in app.module.ts add the CUSTOM_ELEMENTS_SCHEMA.

import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;
and then

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

Your app.module.ts should look like this:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Please Note: schemas: [ CUSTOM_ELEMENTS_SCHEMA ] need to be added to each component where you are using custom HTML tags.

Step 4: Consume it in your Html file.

Now, in app.component.html add the sg-tooltip component.

<sg-tooltip tooltip-text="Hover the Text" tooltip-title="Basic Tooltip"></sg-tooltip>

Click Here for live Demo.

Conclusion:

This sg-tooltip component have different options, you can configure it based on your project needs.

Hope this article is useful to you and your project, If you like this article, like & share it with your friends.

Follow Me for more articles.