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

Tooltip open or display modes in React Tooltip component

24 May 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
Copied to clipboard
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
export class App extends React.Component {
    constructor() {
        super(...arguments);
        this.customTooltip = null;
    }
    handleDoubleClick(args) {
        if (args.target.getAttribute("data-tooltip-id")) {
            this.customTooltip.close();
        }
        else {
            this.customTooltip.open(args.target);
        }
    }
    render() {
        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 => {
            this.customTooltip = tooltip;
        }} position="BottomCenter" opensOn="Custom">
            <button className="blocks e-primary e-outline e-btn" id="tooltipcustom" onDoubleClick={this.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>);
    }
}
Copied to clipboard
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';
export default class App extends React.Component {
    handleDoubleClick(args) {
        if (args.target.getAttribute('data-tooltip-id')) {
            this.customTooltip.close();
        }
        else {
            this.customTooltip.open(args.target);
        }
    }
    render() {
        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 => {
            this.customTooltip = tooltip;
        }} position="BottomCenter" opensOn="Custom">
            <button className="blocks e-primary e-outline e-btn" id="tooltipcustom" onDoubleClick={this.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>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!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.1.57/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/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>
Copied to clipboard
#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 */
Copied to clipboard
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

export  class App extends React.Component<{}, {}> {
  customTooltip: TooltipComponent = null as any;
  private handleDoubleClick(args: any): void {
    if (args.target.getAttribute("data-tooltip-id")) {
      this.customTooltip.close();
    } else {
      this.customTooltip.open(args.target);
    }
  }
  render() {
    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 => {
              this.customTooltip = tooltip as any;
            }}
            position="BottomCenter"
            opensOn="Custom"
          >
            <button
              className="blocks e-primary e-outline e-btn"
              id="tooltipcustom"
              onDoubleClick={this.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>
    );
  }
}
Copied to clipboard
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';

export default class App extends React.Component<{}, {}> {
  private handleDoubleClick(args): void {
    if (args.target.getAttribute('data-tooltip-id')) {
      this.customTooltip.close();
    } else {
      this.customTooltip.open(args.target);
    }
  }
  render() {
    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 => {
              this.customTooltip = tooltip;
            }}
            position="BottomCenter"
            opensOn="Custom"
          >
            <button
              className="blocks e-primary e-outline e-btn"
              id="tooltipcustom"
              onDoubleClick={this.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>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Previous
Next