Open mode in Angular Tooltip

26 Sep 202614 minutes to read

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

On mobile devices, Angular Tooltip appear when you tap and hold the element, even if the opensOn option is assigned with Hover.
Angular Tooltip 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 Angular Tooltip disappears.

The opensOn property accepts either a single value or multiple values separated by a space. The table below explains how the Angular 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 Angular 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 Angular 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: `
    <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';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom open mode

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

The following code example demonstrates how to define custom open mode for the Angular 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';
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';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Open/Close Tooltip with delay

Delay Angular 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';
bootstrapApplication(AppComponent).catch((err) => console.error(err));