We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started easily with Syncfusion Angular 11 Tooltip?

Platform: Angular - EJ 2 |
Control: 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:

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. 

2X faster development

The ultimate Angular UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile