Articles in this section
Category / Section

How to get started easily with Syncfusion Angular 11 Tooltip?

2 mins read

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:

Installation and application creation

 

You can install Angular CLI 11 using the following command.

npm install -g @angular/cli@11.2.3

 

Note:

If you want to follow and run the application in Angular 9 or earlier version, replace the CLI command version with your preferred version and install it.

 

npm install -g @angular/cli@<CLI VERSION>

 

Create an Angular 11 application

 

  1. Create an Angular 11 application using Angular cli.

 

ng new angular11-app

cd angular11-app

 

  1. Serve the Angular 11 application using following command.

 

ng serve --open 

 

Angular-app

 

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
    
    

 

  1. 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 { }

 

  1. 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';

 

  1. 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>

 

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

 

ng serve --open 

 

Tooltip

 
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. 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied