Tooltip open or display modes in React Tooltip component

18 Jan 202323 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.

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