Search results

Tooltip open or display modes

01 Dec 2022 / 2 minutes to read

The open mode property of tooltip can be defined on a target that is hovering, focusing, or clicking. Tooltip component have the following types of open mode:

* Auto
* Hover
* Click
* Focus
* Custom

** Auto **

Tooltip appears when you hover over the target or when the target element receives the 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. So, bind your own events and use either open or close public methods.

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

    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 id="showTooltip" opensOn='Click' content='Tooltip from click' position='BottomCenter'>
          <button class="blocks" id="tooltipclick">Click me</button>
    <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 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>
    <div id="third">
    <ejs-tooltip #tooltip 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 #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"/>

export class AppComponent {
    public tooltipCustom: TooltipComponent;
    constructor() { }
     customOpen(args: any): void {
        if ("data-tooltip-id")) {
        } else {
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';
import { AppComponent } from './app.component';

 * Module
    imports: [
    declarations: [AppComponent],
    bootstrap: [AppComponent]
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

Copied to clipboard
#loader {
  color: #008cff;
  font-family: 'Helvetica Neue', 'calibiri';
  font-size: 16px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
#textbox {
  display: inline-block;
  top: -3px;
.blocks {
  margin: 0 10px 0 10px;
  text-transform: none;
  width: 168px;
  height: 31px;
  border: 1px solid #ff4081;
  background: transparent;

#showTooltip {
  display: inline-block;
  padding-top: 40px;
  margin: 0 auto;

#focus {
  border: 1px solid #ff4081;
  text-align: center;
  height: 31px;
  width: 168px;
  margin: 0 10px 0 10px;

#sample {
  display: table;
  margin: 0 auto;