Open mode in React Tooltip component

28 Feb 202524 minutes to read

You can specify the mode in which the Tooltip opens on a page, i.e., on hovering, focusing, or clicking on the target elements.

On mobile devices, Tooltips appear when you tap and hold the element, even if the opensOn option is assigned with Hover.
Tooltips are also displayed as long as you continue to tap and hold the element. When you release your finger, it disappears after 1.5 seconds.
If there is another action before that time ends, then the Tooltip disappears.

The opensOn property can take either a single or a combination of multiple values, separated by space from the following options.
The table below explains how the Tooltip opens on both desktop and mobile based on the value(s) assigned to the opensOn property.
By default, it takes Auto value.

Values Desktop Mobile
Auto Tooltip appears when you hover over the target or when the target element receives the focus. Tooltip opens on tap and hold of the target element.
Hover Tooltip appears when you hover over the target. Tooltip opens on tap and hold of the target element.
Click Tooltip appears when you click a target element. Tooltip appears when you single tap the target element.
Focus Tooltip appears when you focus (say through tab key) on a target element. Tooltip appears with a single tap on the target element.
Custom Tooltip is not triggered by any default action. So, you have to bind your own events and use either open or close public methods. Same as Desktop.

To open the Tooltip for multiple actions, say while hovering over or clicking on a target element, the opensOn property can be assigned with multiple values, separated by space as hover click.

Auto value cannot be used with any combination for multiple values.

The following code example shows how to set the open mode for Tooltips.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
    let buttonElement;
    let tooltipInstance;
    function handleClick() {
        if (buttonElement.getAttribute('data-tooltip-id')) {
            tooltipInstance.close();
        }
        else {
            tooltipInstance.open(buttonElement);
        }
    }
    ;
    let style = {
        margin: '150px auto 0 auto', transform: 'translateY(-50%)'
    };
    let margin = {
        margin: '40px'
    };
    return (<div id='container'>
        <table style={style}>
            <tbody>
                <tr>
                    <td>
                        <TooltipComponent content='Tooltip from hover' opensOn='Hover' target='#hoverButton'>
                            <button style={margin} id='hoverButton' className="e-btn blocks">Hover Me !(Default)</button>
                        </TooltipComponent>
                    </td>
                    <td>
                        <TooltipComponent content='Tooltip from click' opensOn='Click' target='#clickButton'>
                            <button style={margin} id='clickButton' className="e-btn blocks">Click Me !</button>
                        </TooltipComponent>
                    </td>
                </tr>
                <tr>
                    <td>
                        <TooltipComponent content='Tooltip from focus' opensOn='Focus' target='#tooltipfocus'>
                            <span style={margin} id="textbox" className="e-float-input blocks">
                                <input id="tooltipfocus" type="text" placeholder="Focus and blur" />
                            </span>
                        </TooltipComponent>
                    </td>
                    <td>
                        <TooltipComponent className="wrap" ref={t => tooltipInstance = t} opensOn='custom' content='Tooltip from custom mode'>
                            <input id="box" type="button" className="e-btn" ref={d => buttonElement = d} onClick={handleClick.bind(this)} value="Click to open Tooltip manually" />
                        </TooltipComponent>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';

function App() {
    let buttonElement: HTMLElement;
    let tooltipInstance: TooltipComponent;
    function handleClick(): void {
        if (buttonElement.getAttribute('data-tooltip-id')) {
            tooltipInstance.close();
        } else {
            tooltipInstance.open(buttonElement);
        }
    };
    let style: object = {
        margin: '150px auto 0 auto', transform: 'translateY(-50%)'
    };
    let margin: object = {
        margin: '40px'
    };
    return (
        <div id='container'>
            <table style={style}>
                <tbody>
                    <tr>
                        <td>
                            <TooltipComponent content='Tooltip from hover' opensOn='Hover' target='#hoverButton'>
                                <button style={margin} id='hoverButton' className="e-btn blocks">Hover Me !(Default)</button>
                            </TooltipComponent>
                        </td>
                        <td>
                            <TooltipComponent content='Tooltip from click' opensOn='Click' target='#clickButton'>
                                <button style={margin} id='clickButton' className="e-btn blocks">Click Me !</button>
                            </TooltipComponent>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <TooltipComponent content='Tooltip from focus' opensOn='Focus' target='#tooltipfocus'>
                                <span style={margin} id="textbox" className="e-float-input blocks">
                                    <input id="tooltipfocus" type="text" placeholder="Focus and blur" />
                                </span>
                            </TooltipComponent>
                        </td>
                        <td>
                            <TooltipComponent className="wrap" ref={t => tooltipInstance = t} opensOn='custom' content='Tooltip from custom mode'>
                                <input id="box" type="button" className="e-btn" ref={d => buttonElement = d} onClick={handleClick.bind(this)} value="Click to open Tooltip manually" />
                            </TooltipComponent>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.blocks {
    width: 260px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Tooltip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Custom open mode

Other than the above specified options, the custom mode makes the Tooltip appear on screen for user-defined custom actions such as right-click, double-click, and so on. In this mode, the Tooltip is not triggered by any default action, and you have to bind your own events and use either open or close public methods to show or hide the Tooltips.

The following code example shows how to define custom open mode for the Tooltip.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
    let buttonElement;
    let tooltipInstance;
    function handleDoubleClick() {
        if (buttonElement.getAttribute('data-tooltip-id')) {
            tooltipInstance.close();
        }
        else {
            tooltipInstance.open(buttonElement);
        }
    }
    ;
    return (<TooltipComponent className="wrap" ref={t => tooltipInstance = t} opensOn='custom' content='Tooltip from custom mode'>
        <input id="box" type="button" ref={d => buttonElement = d} onDoubleClick={handleDoubleClick.bind(this)} value="Double click to open tooltip" />
    </TooltipComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';

function App() {
    let buttonElement: HTMLElement;
    let tooltipInstance: TooltipComponent;
    function handleDoubleClick(): void {
        if (buttonElement.getAttribute('data-tooltip-id')) {
            tooltipInstance.close();
        } else {
            tooltipInstance.open(buttonElement);
        }
    };
    return (
        <TooltipComponent className="wrap" ref={t => tooltipInstance = t} opensOn='custom' content='Tooltip from custom mode'>
            <input id="box" type="button" ref={d => buttonElement = d} onDoubleClick={handleDoubleClick.bind(this)} value="Double click to open tooltip" />
        </TooltipComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
#container {
    visibility: hidden;
}

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

#box {
    background-color: #cfd8dc;
    border: 3px solid #eceff1;
    box-sizing: border-box;
    margin: 80px auto;
    padding: 20px 0;
    width: 300px;
    text-align: center;
    color: #424242;
    font-size: 20px;
    user-select: none;
    display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Tooltip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Sticky mode

When this mode is set to true, Tooltips remain visible on the screen until the close icon is pressed. In this mode, a close icon is attached to the Tooltip, located at the top right corner. This mode can be enabled or disabled using the isSticky property.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
    return (<TooltipComponent className="tooltip-box" isSticky={true} content='Click close icon to close me'>
        <div id='target'>Show Tooltip</div>
    </TooltipComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';

function App() {
  return (
    <TooltipComponent className="tooltip-box" isSticky={true} content='Click close icon to close me'>
      <div id='target'>Show Tooltip</div>
    </TooltipComponent>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
#container {
    visibility: hidden;
}

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

#target {
    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;
    user-select: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Tooltip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Open/Close Tooltip with delay

The Tooltips can be opened or closed after a specified delay by using the openDelay and closeDelay properties.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
    return (<TooltipComponent className="tooltip-box" content='Tooltip with delay' openDelay={1000} closeDelay={1000}>
        <div id='target'>Show Tooltip</div>
    </TooltipComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';

function App() {
  return (
    <TooltipComponent className="tooltip-box" content='Tooltip with delay' openDelay={1000} closeDelay={1000}>
      <div id='target'>Show Tooltip</div>
    </TooltipComponent>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
#container {
    visibility: hidden;
}

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

#target {
    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;
    user-select: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Tooltip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>