Tooltip open or display modes in Angular Tooltip component

8 Jan 20253 minutes to read

The open mode property of Tooltip can be defined for hovering, focusing, or clicking on a target. The Tooltip component has the following types of open mode:

* Auto
* Hover
* Click
* Focus
* Custom

Auto

Tooltip appears on hover or when the target element receives focus.

Hover

Tooltip appears when you hover over the target.

Click

Tooltip appears when you click a target element.

Focus

Tooltip appears when you focus (say through tab key) on a target element.

Custom

Tooltip is not triggered by any default action. You need to bind your own events and use either the open or close public methods.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TooltipModule } from '@syncfusion/ej2-angular-popups'




import { Component, ViewChild } from '@angular/core';
import { TooltipComponent } from '@syncfusion/ej2-angular-popups';

@Component({
    imports: [

        TooltipModule
    ],


    standalone: true,
    selector: 'my-app',
    template: `
    <div id="sample">
    <div id="first">
    <ejs-tooltip id="showTooltip" opensOn='Hover' content='Tooltip from hover' position='BottomCenter'>
        <button class="blocks" id="tooltiphover">Hover me</button>
    </ejs-tooltip>
    <ejs-tooltip id="showTooltip" opensOn='Click' content='Tooltip from click' position='BottomCenter'>
          <button class="blocks" id="tooltipclick">Click me</button>
    </ejs-tooltip>
    </div>
    <div id="second">
    <ejs-tooltip id="showTooltip" content='Click close icon to close me' [isSticky]='true' position='BottomCenter'>
          <button class="blocks" id="tooltipclick">Sticky mode</button>
    </ejs-tooltip>
    <ejs-tooltip id="showTooltip" content='Opens and closes Tooltip with delay of <i>1000 milliseconds</i>' position='BottomCenter' [openDelay]='1000' [closeDelay]='1000'>
          <button class="blocks" id="tooltipclick">Tooltip with delay</button>
    </ejs-tooltip>
    </div>
    <div id="third">
    <ejs-tooltip #tooltipCustom id="showTooltip" content='Tooltip from custom mode' opensOn='Custom' position='BottomCenter' (dblclick)='customOpen($event)'>
          <button class="blocks" id="tooltipclick">Double Click on Me</button>
    </ejs-tooltip>
    <ejs-tooltip #tooltip id="showTooltip" content='Tooltip from focus' position='BottomCenter'>
           <div id="textbox" class="e-float-input">
              <input id="focus" type="text" placeholder="Focus and blur"/>
           </div>
    </ejs-tooltip>
    </div>
    </div>
    `,
})

export class AppComponent {
    @ViewChild('tooltipCustom')
    public tooltipCustom: TooltipComponent | any;

    constructor() { }
    customOpen(args: any): void {
        if (args.target.getAttribute("data-tooltip-id")) {
            this.tooltipCustom.close();
        } else {
            this.tooltipCustom.open(args.target);
        }
    }
}

main.ts

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