How to get started easily with Syncfusion Angular 11 Tooltip?

The Essential JS2 Angular Tooltip component is used to display a pop-up that contains information or message when you hover, click, focus, or touch an element. The information displayed in the tooltip includes simple text, images, hyperlinks, or custom templates. In mobile devices, to display the tooltip, tap and hold the target elements. This KB article explains how to easily get started with EJ2 Tooltip component in Angular 11 project with minimal code.

Prerequisites

Before starting, the following tools and SDK need to be installed in your machine:

• Node.js (latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio code for Editor

Installation and application creation

You can install Angular CLI 11 using the following command.

npm install -g @angular/cli@11.2.3

Create an Angular 11 application

1. Create an Angular 11 application using Angular cli.

ng new angular11-app

cd angular11-app

2. Serve the Angular 11 application using following command.

ng serve --open 

Your application will open in browser in the http://localhost:4200. Refer to the following screenshot for Angular 11 version.

Adding Angular 11 Tooltip

1. After running the Angular 11 application successfully, configure the Angular Dialog in this application. Install Angular Tooltip and EJ2 package using following command. 

   npm install @syncfusion/ej2-angular-popups
   
   npm install @syncfusion/ej2
   
   

2. You can add the Angular 11 Tooltip component by using the `ejs-tooltip` tag. The attributes used within this tag allow you to define other functionalities of tooltip.

Import TooltipModule into the app.module.ts file from the @syncfusion/ej2-angular-popups package.

[app.module.ts]

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

import { TooltipModule } from '@syncfusion/ej2-angular-popups';

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    TooltipModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

3. Import the CSS styles of the tooltip component.

[styles.css]

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../node_modules/@syncfusion/ej2-angular-popups/styles/material.css';

4. Add the tooltip component in the template file.

[app.component.html]

<div style="width: 300px; margin: 50px;">

  <ejs-tooltip id="tooltip" content="Tooltip Content">

    <button>Hover Me!</button>

  </ejs-tooltip>

</div>

5. Run the application using the following command, and you can see the following represented output of the EJ2 Angular Tooltip component.

ng serve --open 

Position

The tooltip can be shown on the following 12 positions by selecting the appropriate position values provided in the drop-down:

• TopLeft
• TopCenter
• TopRight
• BottomLeft
• BottomCenter
• BottomRight
• LeftTop
• LeftCenter
• LeftBottom
• RightTop
• RightCenter
• RightBottom

[app.component.html]

<div style="width: 300px; margin: 150px;">

  <ejs-tooltip id="tooltip" content="Tooltip Content" position="LeftCenter">

    <button>Hover Me!</button>

  </ejs-tooltip>

</div>

Open mode

Tooltip supports different types of trigger such as Auto, Hover, Click, and Custom to open the tooltip on its target element using the “opensOn” property.

[app.component.html]

<div style="width: 300px; margin: 150px;">

  <ejs-tooltip id="tooltip" content="Tooltip Content" opensOn="Click">

    <button>Hover Me!</button>

  </ejs-tooltip>

</div>

Summary

Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below.