Search results

Getting Started

This section briefly explains how to create a simple Tooltip component and configure its available functionalities in angular.

Setup Angular Environment

You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.

npm install -g @angular/cli

Create an Angular Application

Start a new Angular application using below Angular CLI command.

ng new my-app
cd my-app

Adding Syncfusion Tooltip package

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

Registering Tooltip Module

Import Tooltip module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-popups [src/app/app.module.ts].

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the Tooltip Module for the Tooltip component
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { AppComponent }  from './app.component';

@NgModule({
  //declaration of Tooltip module into NgModule
  imports:      [ BrowserModule, TooltipModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Adding CSS reference

The following CSS files are available in ../node_modules/@syncfusion package folder. This can be referenced in [src/styles.css] using following code.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

Add Tooltip component

Modify the template in [src/app/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 } from '@angular/core';

@Component({
  selector: 'app-root',
  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>`
})
export class AppComponent {}

Run the application

Use the following command to run the application in browser.

ng serve --open

The output will appear as follows.

Source
Preview
app.component.ts
app.module.ts
main.ts
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);

Initialize Tooltip within a container

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.

Source
Preview
app.component.ts
app.module.ts
main.ts
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);

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.

See Also

Positioning Tooltip

Tooltip Open Mode

Customize the Tooltip