How to Tooltip open or display modes in React Tooltip component

React

Search results

08 Dec 2022 / 1 minute 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

App.jsx

index.jsx

index.html

index.css

App.tsx

index.tsx

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;

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'));

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

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

</html>

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

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;

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'));

Contents

Auto
Hover
Click
Focus
Custom

Contents

Auto
Hover
Click
Focus
Custom

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!