Tooltip open or display modes in React Tooltip component

28 Feb 202524 minutes to read

The open mode property of the Tooltip defines how it is triggered on a target element, such as by hovering, focusing, or clicking. Tooltip component has the following types of open mode:

• Auto
• Hover
• Click
• Focus
• Custom

Auto

Tooltip appears when you hover over the target element or when the target element receives the focus.

Hover

Tooltip appears when you hover over the target element.

Click

Tooltip appears when you click the target element.

Focus

Tooltip appears when you focus on a target element (for example, by using the tab key).

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.jsx

import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
  let customTooltip = null;
  function handleDoubleClick(args) {
    if (args.target.getAttribute("data-tooltip-id")) {
      customTooltip.close();
    }
    else {
      customTooltip.open(args.target);
    }
  }
  return (<div id="showTooltip">
    <div id="first">
      <TooltipComponent opensOn="Hover" content="Tooltip from hover" position="BottomCenter">
        <ButtonComponent className="blocks" id="tooltiphover" cssClass="e-outline" isPrimary={true}>
          Hover me
        </ButtonComponent>
      </TooltipComponent>
      <TooltipComponent opensOn="Click" content="Tooltip from click" position="BottomCenter">
        <ButtonComponent className="blocks" id="tooltipclick" cssClass="e-outline" isPrimary={true}>
          Click me
        </ButtonComponent>
      </TooltipComponent>
    </div>
    <br />
    <br />
    <div id="second">
      <TooltipComponent content="Click close icon to close me" position="BottomCenter" isSticky={true}>
        <ButtonComponent className="blocks" id="tooltipclick" cssClass="e-outline" isPrimary={true}>
          Sticky mode
        </ButtonComponent>
      </TooltipComponent>
      <TooltipComponent content="Opens and closes Tooltip with delay of <i>1000 milliseconds</i>" position="BottomCenter" openDelay="1000" closeDelay="1000">
        <ButtonComponent className="blocks" id="tooltipclick" cssClass="e-outline" isPrimary={true}>
          Tooltip with delay
        </ButtonComponent>
      </TooltipComponent>
    </div>
    <br />
    <br />
    <div id="third">
      <TooltipComponent content="Tooltip from custom mode" ref={tooltip => {
        customTooltip = tooltip;
      }} position="BottomCenter" opensOn="Custom">
        <button className="blocks e-primary e-outline e-btn" id="tooltipcustom" onDoubleClick={handleDoubleClick.bind(this)}>
          Double Click on Me
        </button>
      </TooltipComponent>
      <TooltipComponent content="Tooltip from focus" position="BottomCenter">
        <div id="textbox" className="e-float-input blocks">
          <input id="focus" type="text" placeholder="Focus and blur" />
        </div>
      </TooltipComponent>
    </div>
  </div>);
}
export default App;

app.tsx

import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  let customTooltip: TooltipComponent = null as any;
  function handleDoubleClick(args: any): void {
    if (args.target.getAttribute("data-tooltip-id")) {
      customTooltip.close();
    } else {
      customTooltip.open(args.target);
    }
  }
  return (
    <div id="showTooltip">
      <div id="first">
        <TooltipComponent
          opensOn="Hover"
          content="Tooltip from hover"
          position="BottomCenter"
        >
          <ButtonComponent
            className="blocks"
            id="tooltiphover"
            cssClass="e-outline"
            isPrimary={true}
          >
            Hover me
          </ButtonComponent>
        </TooltipComponent>
        <TooltipComponent
          opensOn="Click"
          content="Tooltip from click"
          position="BottomCenter"
        >
          <ButtonComponent
            className="blocks"
            id="tooltipclick"
            cssClass="e-outline"
            isPrimary={true}
          >
            Click me
          </ButtonComponent>
        </TooltipComponent>
      </div>
      <br />
      <br />
      <div id="second">
        <TooltipComponent
          content="Click close icon to close me"
          position="BottomCenter"
          isSticky={true}
        >
          <ButtonComponent
            className="blocks"
            id="tooltipclick"
            cssClass="e-outline"
            isPrimary={true}
          >
            Sticky mode
          </ButtonComponent>
        </TooltipComponent>
        <TooltipComponent
          content="Opens and closes Tooltip with delay of <i>1000 milliseconds</i>"
          position="BottomCenter"
          openDelay="1000"
          closeDelay="1000"
        >
          <ButtonComponent
            className="blocks"
            id="tooltipclick"
            cssClass="e-outline"
            isPrimary={true}
          >
            Tooltip with delay
          </ButtonComponent>
        </TooltipComponent>
      </div>
      <br />
      <br />
      <div id="third">
        <TooltipComponent
          content="Tooltip from custom mode"
          ref={tooltip => {
            customTooltip = tooltip as any;
          }}
          position="BottomCenter"
          opensOn="Custom"
        >
          <button
            className="blocks e-primary e-outline e-btn"
            id="tooltipcustom"
            onDoubleClick={handleDoubleClick.bind(this)}
          >
            Double Click on Me
          </button>
        </TooltipComponent>
        <TooltipComponent content="Tooltip from focus" position="BottomCenter">
          <div id="textbox" className="e-float-input blocks">
            <input id="focus" type="text" placeholder="Focus and blur" />
          </div>
        </TooltipComponent>
      </div>
    </div>
  );
}
export default App;

index.jsx

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
  let customTooltip = null;
  function handleDoubleClick(args) {
    if (args.target.getAttribute('data-tooltip-id')) {
      customTooltip.close();
    }
    else {
      customTooltip.open(args.target);
    }
  }
  return (<div id="showTooltip">
    <div id="first">
      <TooltipComponent opensOn="Hover" content="Tooltip from hover" position="BottomCenter">
        <ButtonComponent className="blocks" id="tooltiphover" cssClass="e-outline" isPrimary={true}>
          Hover me
        </ButtonComponent>
      </TooltipComponent>
      <TooltipComponent opensOn="Click" content="Tooltip from click" position="BottomCenter">
        <ButtonComponent className="blocks" id="tooltipclick" cssClass="e-outline" isPrimary={true}>
          Click me
        </ButtonComponent>
      </TooltipComponent>
    </div>
    <br />
    <br />
    <div id="second">
      <TooltipComponent content="Click close icon to close me" position="BottomCenter" isSticky={true}>
        <ButtonComponent className="blocks" id="tooltipclick" cssClass="e-outline" isPrimary={true}>
          Sticky mode
        </ButtonComponent>
      </TooltipComponent>
      <TooltipComponent content="Opens and closes Tooltip with delay of <i>1000 milliseconds</i>" position="BottomCenter" openDelay="1000" closeDelay="1000">
        <ButtonComponent className="blocks" id="tooltipclick" cssClass="e-outline" isPrimary={true}>
          Tooltip with delay
        </ButtonComponent>
      </TooltipComponent>
    </div>
    <br />
    <br />
    <div id="third">
      <TooltipComponent content="Tooltip from custom mode" ref={tooltip => {
        customTooltip = tooltip;
      }} position="BottomCenter" opensOn="Custom">
        <button className="blocks e-primary e-outline e-btn" id="tooltipcustom" onDoubleClick={handleDoubleClick.bind(this)}>
          Double Click on Me
        </button>
      </TooltipComponent>
      <TooltipComponent content="Tooltip from focus" position="BottomCenter">
        <div id="textbox" className="e-float-input blocks">
          <input id="focus" type="text" placeholder="Focus and blur" />
        </div>
      </TooltipComponent>
    </div>
  </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  let customTooltip: TooltipComponent = null as any;
  function handleDoubleClick(args): void {
    if (args.target.getAttribute('data-tooltip-id')) {
      customTooltip.close();
    } else {
      customTooltip.open(args.target);
    }
  }
  return (
    <div id="showTooltip">
      <div id="first">
        <TooltipComponent
          opensOn="Hover"
          content="Tooltip from hover"
          position="BottomCenter"
        >
          <ButtonComponent
            className="blocks"
            id="tooltiphover"
            cssClass="e-outline"
            isPrimary={true}
          >
            Hover me
          </ButtonComponent>
        </TooltipComponent>
        <TooltipComponent
          opensOn="Click"
          content="Tooltip from click"
          position="BottomCenter"
        >
          <ButtonComponent
            className="blocks"
            id="tooltipclick"
            cssClass="e-outline"
            isPrimary={true}
          >
            Click me
          </ButtonComponent>
        </TooltipComponent>
      </div>
      <br />
      <br />
      <div id="second">
        <TooltipComponent
          content="Click close icon to close me"
          position="BottomCenter"
          isSticky={true}
        >
          <ButtonComponent
            className="blocks"
            id="tooltipclick"
            cssClass="e-outline"
            isPrimary={true}
          >
            Sticky mode
          </ButtonComponent>
        </TooltipComponent>
        <TooltipComponent
          content="Opens and closes Tooltip with delay of <i>1000 milliseconds</i>"
          position="BottomCenter"
          openDelay="1000"
          closeDelay="1000"
        >
          <ButtonComponent
            className="blocks"
            id="tooltipclick"
            cssClass="e-outline"
            isPrimary={true}
          >
            Tooltip with delay
          </ButtonComponent>
        </TooltipComponent>
      </div>
      <br />
      <br />
      <div id="third">
        <TooltipComponent
          content="Tooltip from custom mode"
          ref={tooltip => {
            customTooltip = tooltip;
          }}
          position="BottomCenter"
          opensOn="Custom"
        >
          <button
            className="blocks e-primary e-outline e-btn"
            id="tooltipcustom"
            onDoubleClick={handleDoubleClick.bind(this)}
          >
            Double Click on Me
          </button>
        </TooltipComponent>
        <TooltipComponent
          content="Tooltip from focus"
          position="BottomCenter"
        >
          <div id="textbox" className="e-float-input blocks">
            <input id="focus" type="text" placeholder="Focus and blur" />
          </div>
        </TooltipComponent>
      </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

index.css

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

#first,
#second,
#third {
    display: inline-flex;
}

#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 */

index.html

<!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/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/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>