JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Tooltip open or display modes in JavaScript Tooltip control

06 Jun 2023 / 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.

Source
Preview
index.ts
index.html
index.css
Copied to clipboard
import { Tooltip } from '@syncfusion/ej2-popups';
import { Button } from '@syncfusion/ej2-buttons';

//Render button components

let tooltiphover: Button = new Button({ cssClass: 'e-outline', isPrimary: true });
tooltiphover.appendTo('#tooltiphover');

let tooltipclick: Button = new Button({ cssClass: 'e-outline', isPrimary: true });
tooltipclick.appendTo('#tooltipclick');

let tooltipcustom: Button = new Button({ cssClass: 'e-outline', isPrimary: true });
tooltipcustom.appendTo('#tooltipcustom');

let Mode: Button = new Button({ cssClass: 'e-outline', isPrimary: true });
Mode.appendTo('#Mode');

let open: Button = new Button({ cssClass: 'e-outline', isPrimary: true });
open.appendTo('#openMode');

//Render tooltip component

let hoverTooltip: Tooltip = new Tooltip({
cssClass: 'e-tooltip-css',
opensOn: 'Hover',
content: 'Tooltip from hover'
});
hoverTooltip.appendTo('#tooltiphover');

let clickTooltip: Tooltip = new Tooltip({
cssClass: 'e-tooltip-css',
opensOn: 'Click',
content: 'Tooltip from click'
});
clickTooltip.appendTo('#tooltipclick');

let focusTooltip: Tooltip = new Tooltip({
cssClass: 'e-tooltip-css',
opensOn: 'Focus',
content: 'Tooltip from focus'
});
focusTooltip.appendTo('#focus');

let customTooltip: Tooltip = new Tooltip({
cssClass: 'e-tooltip-css',
opensOn: 'Custom',
content: 'Tooltip from custom mode'
});
customTooltip.appendTo('#tooltipcustom');

let openMode: Tooltip = new Tooltip({
cssClass: 'e-tooltip-css',
openDelay: 1000,
closeDelay: 1000,
position: 'BottomCenter',
content: 'Opens and closes Tooltip with delay of <i>1000 milliseconds</i>'
});
openMode.appendTo('#openMode');

let mode: Tooltip = new Tooltip({
cssClass: 'e-tooltip-css',
content: 'Click close icon to close me',
position: 'BottomCenter',
isSticky: true
});
mode.appendTo('#Mode');

document.getElementById('tooltipcustom').addEventListener("dblclick", function () {
if (this.getAttribute("data-tooltip-id")) {
    customTooltip.close();
} else {
    customTooltip.open(this);
}
});
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Tooltip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="showTooltip">
            <div id="first">
                <button class="blocks" id="tooltiphover">Hover me!(Default)</button>
                <button class="blocks" id="tooltipclick">Click me!</button>
            </div>
            <br/><br/>
            <div id="second">
                <button class="blocks" id="Mode">Sticky Mode</button>
                <button class="blocks" id="openMode">Tooltip with delay</button>
            </div>
            <br/><br/>
            <div id="third">
              <button class="blocks" id="tooltipcustom">Double click on me!</button>
                <div id="textbox" class="e-float-input blocks">
                <input id="focus" type="text" placeholder="Focus and blur"/>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
Copied to clipboard
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

#container {
  width: 100%;
}

#textbox {
  display: inline-block;
  top: -3px;
}
.blocks {
  margin: 0 10px 0 10px;
  text-transform: none;
  width: 168px;
}

#showTooltip {
  display: table;
  padding-top: 40px;
  margin: 0 auto;
}

#focus {
  border: 1px solid #ff4081;
  text-align: center;
  height: 31px;
  width: 168px;
}
/* csslint ignore:start */

::placeholder {
  color: #ff4081;
}

/* csslint ignore:end */
Previous
Next