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

Tooltip open or display modes in JavaScript (ES5) Tooltip control

23 Mar 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.js
index.html
index.css
Copied to clipboard
var tooltiphover = new ej.buttons.Button({ cssClass: 'e-outline', isPrimary: true });
tooltiphover.appendTo('#tooltiphover');

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

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

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

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

//Render Tooltip component

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

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

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

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

var openMode = new ej.popups.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');

var mode = new ej.popups.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.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <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>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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