HelpBot Assistant

How can I help you?

Open mode in Angular Tooltip component

26 Feb 202615 minutes to read

Control how the tooltip opens on the page—on hover, focus, or click—using the opensOn property on target elements.

On mobile devices, Tooltips appear when you tap and hold the element, even if the opensOn option is assigned with Hover.
Tooltips are also displayed as long as you continue to tap and hold the element. On release, it disappears after 1.5 seconds.
If there is another action before that time ends, then the Tooltip disappears.

The opensOn property accepts either a single value or multiple values separated by a space. The table below explains how the tooltip opens on desktop and mobile based on the opensOn property value. By default, it is set to Auto.

Values Desktop Mobile
Auto Tooltip appears on hover or focus. Tooltip opens on tap and hold.
Hover Tooltip appears on hover. Tooltip opens on tap and hold.
Click Tooltip appears on click. Tooltip appears on single tap.
Focus Tooltip appears on focus (e.g., through Tab key). Tooltip appears on single tap.
Custom Tooltip is not triggered by default. Bind your own events and use the open or close methods. Same as Desktop.

To open the tooltip on multiple actions (e.g., hover or click), assign the opensOn property with multiple space-separated values, such as hover click.

The Auto value cannot be combined with other values.

The following code example demonstrates how to set the open mode for tooltips.

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 { Component, ViewChild } from '@angular/core';
import { TooltipComponent } from '@syncfusion/ej2-angular-popups';

@Component({
  imports: [
    TooltipModule,
    ButtonModule
  ],
  standalone: true,
  selector: 'my-app',
  template: `
    <div id='container'>
        <table style="margin: 150px auto 0 auto;transform: translateY(-50%);">
            <tbody>
                <tr>
                    <td style="padding:25px">
                      <ejs-tooltip id="tooltipHover" opensOn='Hover' content='Tooltip from hover' >
                       <div>
                        <input ejs-button  class="blocks" type="button" value="Hover Me!"/></div>
                      </ejs-tooltip>
                    </td>
                    <td style="padding:25px">
                      <ejs-tooltip id="tooltipClick"  opensOn='Click' content='Tooltip from click'>
                       <div>
                        <input ejs-button  class="blocks" type="button" value="Click Me!"/></div>
                      </ejs-tooltip>
                    </td>
                </tr>
                <tr>
                    <td style="padding:25px">
                      <ejs-tooltip id="tooltipFocus" opensOn='Focus' content='Tooltip from focus' target='#input'>
                         <div>
                          <input id='input' class="blocks e-float-input" type="text" placeholder="Focus and blur"/>
                        </div>
                      </ejs-tooltip>
                    </td>
                    <td style="padding:25px">
                      <ejs-tooltip id="tooltipCustom" #tooltipCustom opensOn='custom' content='Tooltip from custom mode'>
                        <div>
                          <input ejs-button  class="blocks" id="tooltipOpen" type="button" value="Click to open tooltip manually" (click)='onCustomOpen($event)'/>
                        </div>
                      </ejs-tooltip>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    `,
  styles: [`
    .blocks {
        width: 260px;
    }
    `]
})

export class AppComponent {
  @ViewChild('tooltipCustom')
  public tooltipCustom: TooltipComponent | any;
  constructor() { }
  onCustomOpen(args: any): void {
    if (args.target.getAttribute('data-tooltip-id')) {
      this.tooltipCustom.close();
    } else {
      this.tooltipCustom.open(args.target);
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom open mode

The custom mode allows the tooltip to appear on user-defined custom actions such as right-click or double-click. The tooltip is not triggered by any default action. Bind your own events and use the open or close methods to show or hide the tooltip.

The following code example demonstrates how to define custom open mode for the tooltip.

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 { Component, ViewChild } from '@angular/core';
import { TooltipComponent } from '@syncfusion/ej2-angular-popups';

@Component({
    imports: [
        TooltipModule,
        ButtonModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <ejs-tooltip #tooltip id="tooltip" content='Tooltip from custom mode' opensOn='Custom' (dblclick)='customOpen($event)'>
            <span>Double-click to open Tooltip</span>
    </ejs-tooltip>
    `,
    styles: [`
    #tooltip {
        display: block;
        background-color: #cfd8dc;
        border: 3px solid #eceff1;
        box-sizing: border-box;
        margin: 80px auto;
        padding: 20px 0;
        width: 200px;
        text-align: center;
        color: #424242;
        font-size: 20px;
    }
    `]
})

export class AppComponent {
    @ViewChild('tooltip')
    public tooltipControl: TooltipComponent | any;
    constructor() { }
    customOpen(args: any): void {
        if (args.target.getAttribute("data-tooltip-id")) {
            this.tooltipControl.close();
        } else {
            this.tooltipControl.open(args.target);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Sticky mode

Enable sticky mode to keep the tooltip on the screen until you click the close icon. In this mode, the close icon appears in the top right corner of the tooltip. Enable or disable sticky mode using the isSticky property.

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 { Component } from '@angular/core';

@Component({
    imports: [
        TooltipModule,
        ButtonModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <ejs-tooltip id="tooltip" content='Click close icon to close me' [isSticky]='true'>
            <span>Show tooltip</span>
    </ejs-tooltip>
    `,
    styles: [`
    #tooltip {
        display: block;
        background-color: #cfd8dc;
        border: 3px solid #eceff1;
        box-sizing: border-box;
        margin: 80px auto;
        padding: 20px 0;
        width: 200px;
        text-align: center;
        color: #424242;
        font-size: 20px;
    }
    `]
})

export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Open/Close Tooltip with delay

Delay tooltip opening or closing using the openDelay and closeDelay properties.

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 { Component } from '@angular/core';

@Component({
    imports: [
        TooltipModule,
        ButtonModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <ejs-tooltip id="tooltip" content='Tooltip with delay' [openDelay]='1000' [closeDelay]='1000'>
            Show tooltip
    </ejs-tooltip>
    `,
    styles: [`
    #tooltip {
        display: block;
        background-color: #cfd8dc;
        border: 3px solid #eceff1;
        box-sizing: border-box;
        margin: 80px auto;
        padding: 20px 0;
        width: 200px;
        text-align: center;
        color: #424242;
        font-size: 20px;
    }
    `]
})

export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));