This section briefly explains how to create a simple Tooltip component and configure its available functionalities in angular.
The following list of dependencies are required to use Tooltip component in your application.
|-- @syncfusion/ej2-angular-popups
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-angular-base
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttons
You can use Angular CLI
to setup your Angular applications.
To install Angular CLI use the following command.
npm install -g @angular/cli
Start a new Angular application using below Angular CLI command.
ng new my-app
cd my-app
All the available Essential JS 2 packages are published in npmjs.com
registry.
To install Tooltip component, use the following command.
npm install @syncfusion/ej2-angular-popups --save
The —save will instruct NPM to include the tooltip package inside of the
dependencies
section of thepackage.json
.
@syncfusion/ej2-angular-popups
.import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-popups module
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, TooltipModule ], //declaration of TooltipModule module into NgModule
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
styles.css
.[style.css]
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-angular-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-angular-popups/styles/material.css";
We can also use CRG to generate combined component styles.
Modify the template in app.component.ts
file to render the Tooltip
component. Add the Angular Tooltip by using <ejs-tooltip>
selector in template
section of the app.component.ts file.
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<ejs-tooltip id='tooltip' content='Tooltip content'>
Hover Me
</ejs-tooltip>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent { }
ng serve --open
The following code example depicts the way to initialize Tooltip on a single element.
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div id='container' style="display: inline-block; position: relative; left: 50%;top: 100px;transform: translateX(-50%);">
<ejs-tooltip id='tooltip' content='Tooltip content' target="#target">
<button ejs-button id="target">Show Tooltip</button>
</ejs-tooltip>
</div>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TooltipModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
It is possible to create Tooltip on multiple targets within a container. To do so, define the selector
property with specific target
elements - so that the tooltip will be initialized only on those matched targets within a container. In this case, the Tooltip content
gets assigned from the title
attribute of the target element.
Refer the following code example, to create a Tooltip on multiple targets within a container.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div id="tool">
<ejs-tooltip target='.e-info' position='RightCenter'>
<form id="details" role="form">
<table>
<tr>
<td class="info">User Name</td>
<td>
<input type="text" class="e-info" name="firstname" title="Please enter your name"> </td>
</tr>
<tr>
<td class="info">Email Address</td>
<td>
<input type="text" class="e-info" name="email" title="Enter a valid email address">
</td>
</tr>
<tr>
<td class="info">Password</td>
<td>
<input type="password" class="e-info" name="password" title="Be at least 8 characters length">
</td>
</tr>
<tr>
<td class="info">Confirm Password</td>
<td>
<input type="password" class="e-info" name="Cpwd" title="Re-enter your password">
</td>
</tr>
<tr>
<td><input ejs-button id="sample" class="center" type="submit" value="Submit"></td>
<td><input ejs-button id="clear" class="center" type="reset" value="Reset"></td>
</tr>
</table>
</form>
</ejs-tooltip>
</div>
`,
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TooltipModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
#loader {
color: #008cff;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 16px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#tool {
width: 500px;
margin: auto;
transform: translateX(10%);
}
#details table th,
#details table td {
padding: 20px 10px;
text-align: left;
}
#details .info {
font-size: 14px;
text-align: left;
font-weight: 500;
}
.center {
position: relative;
left: 50%;
transform: translateX(-50%);
}
In the above sample,
details
refers to the container’s id, and the target.e-info
refers to the target elements available within that container.