How to get started easily with Syncfusion Angular 9 Tooltip?
The Essential 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 9 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 9
- Angular CLI
Installation and application creation
You can install Angular CLI 9 using the following command.
npm install -g @angular/cli@9.0.2 |
Note:
If you want to follow and run the application in Angular 8 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 9 application
ng new tooltip-angular9 cd tooltip-angular9 |
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 9 version.
Adding Angular 9 Tooltip
You can add the Angular 9 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
Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
Conclusion
I hope you enjoyed learning about how to get started with Angular 9 Tooltip.
You can refer to our Angular Tooltip feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our Angular Tooltip example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
