How to get started easily with Syncfusion Tooltip component in Angular 7?
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 7 project with minimal code.
Prerequisites
Before starting, the following tools and SDK need to be installed in your machine:
- Node.js (v8.10.0 or above)
- Angular 7
- Angular CLI
Installation and application creation
You can install Angular CLI 7 using the following command.
npm install -g @angular/cli@7.0.5 |
Note:
If you want to follow and run the application in Angular 6 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 7 application
ng new tooltip-angular7 cd tooltip-angular7 |
Installing EJ2 Tooltip
npm install @syncfusion/ej2-angular-popups |
Serve the application
ng serve --open |
Your application will open in browser in the http://localhost:4200. Refer to the following screenshot for Angular 7 version.
Adding Angular 7 Tooltip
You can add the Angular 7 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 { } |
- Import the CSS styles of the tooltip component.
[style.css]
@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-popups/styles/material.css'; |
- 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> |
- 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
You can learn more about the Angular 7 Tooltip from the following links:
GitHub repository of code used in this article can be found here.
Checkout Angular 7 Tooltip features.
Checkout Angular 7 Tooltip documentation.
If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
