Position in React Tooltip component

28 Feb 202524 minutes to read

Tooltips can be positioned at 12 static locations around the target. On initializing the Tooltip, you can set the position property with any one of the following values:

TopLeft
TopCenter
TopRight
BottomLeft
BottomCenter
BottomRight
LeftTop
LeftCenter
LeftBottom
RightTop
RightCenter
RightBottom

By default, Tooltip is placed at the TopCenter of the target element.

index.jsx
index.tsx
index.css
index.html
import * as React from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import { TooltipComponent } from "@syncfusion/ej2-react-popups";

function App() {
  const [position, setPosition] = React.useState("TopCenter");
  let tooltipInstance;

  function change(event) {
    setPosition(event.target.value); // Update state with selected value
  }

  return (
    <div id="container">
      <TooltipComponent
        ref={(t) => (tooltipInstance = t)}
        className="tooltip-box"
        content="Tooltip Content"
        target="#tooltip"
        position={position} // Set the position dynamically
      >
        <div id="tooltip">Show Tooltip</div>
      </TooltipComponent>
      <div className="ddl">
        <select
          id="positions"
          onChange={change}
          className="form-control drop-inline"
          value={position} // Bind the state variable
        >
          <option value="TopLeft">Top Left</option>
          <option value="TopCenter">Top Center</option>
          <option value="TopRight">Top Right</option>
          <option value="BottomLeft">Bottom Left</option>
          <option value="BottomCenter">Bottom Center</option>
          <option value="BottomRight">Bottom Right</option>
          <option value="LeftTop">Left Top</option>
          <option value="LeftCenter">Left Center</option>
          <option value="LeftBottom">Left Bottom</option>
          <option value="RightTop">Right Top</option>
          <option value="RightCenter">Right Center</option>
          <option value="RightBottom">Right Bottom</option>
        </select>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent, Position } from '@syncfusion/ej2-react-popups';

function App() {
  const [position, setPosition] = React.useState<string>("TopCenter");

  const change = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setPosition(event.target.value);
  };

  return (
    <div id="container">
      <TooltipComponent
        className="tooltip-box"
        content="Tooltip Content"
        target="#tooltip"
        position={position} // Dynamically set position
      >
        <div id="tooltip">Show Tooltip</div>
      </TooltipComponent>
      <div className="ddl">
        <select
          id="positions"
          onChange={change}
          className="form-control drop-inline"
          value={position} // Bind state variable
        >
          <option value="TopLeft">Top Left</option>
          <option value="TopCenter">Top Center</option>
          <option value="TopRight">Top Right</option>
          <option value="BottomLeft">Bottom Left</option>
          <option value="BottomCenter">Bottom Center</option>
          <option value="BottomRight">Bottom Right</option>
          <option value="LeftTop">Left Top</option>
          <option value="LeftCenter">Left Center</option>
          <option value="LeftBottom">Left Bottom</option>
          <option value="RightTop">Right Top</option>
          <option value="RightCenter">Right Center</option>
          <option value="RightBottom">Right Bottom</option>
        </select>
      </div>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

#container {
  display: inline-flex;
  position: relative;
  left: 50%;
  margin-top: 100px;
  transform: translateX(-50%);
}

#positions {
  position: relative;
  top: 50%;
}

.tooltip-box {
  width: 400px;
  height: 200px;
}

#tooltip {
  background-color: #cfd8dc;
  border: 3px solid #eceff1;
  box-sizing: border-box;
  padding: 20px 0;
  width: 200px;
  text-align: center;
  color: #424242;
  font-size: 20px;
  user-select: none;
  position: relative;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
}

.ddl {
  display: inline-block;
  margin: 0 30px;
}
<!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>

Tip pointer positioning

The Tooltip pointer can be attached or detached from the Tooltip by using the showTipPointer property.
Pointer positions can be adjusted using the tipPointerPosition property, which can be assigned one of the following values:

Auto
Start
Middle
End

The following code example illustrates how to set the pointer to the start position of the Tooltip.

index.jsx
index.tsx
index.css
index.html
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 Content' tipPointerPosition='Start' target='#target'>
        <button className="e-btn" id='target'>Show Tooltip</button>
    </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 Content' tipPointerPosition='Start' target='#target'>
            <button className="e-btn" id='target'>Show Tooltip</button>
        </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 {
    position: relative;
    left: 50%;
    margin-top: 100px;
    transform: translateX(-50%)
}
<!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>

By default, tip pointers are auto adjusted so that the arrow does not point outside the target element.

Dynamic positioning

The Tooltip and its tip pointer can be positioned dynamically based on the target’s location. This can be achieved by using the refresh method, which auto adjusts the Tooltip over the target.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { Draggable } from '@syncfusion/ej2-base';
function App() {
    React.useEffect(() => {
        rendereComplete();
    }, []);
    let tooltipInstance;
    let tooltipAnimation = {
        open: { effect: 'None' },
        close: { effect: 'None' }
    };
    function rendereComplete() {
        let ele = document.getElementById('demoSmart');
        let drag = new Draggable(ele, {
            clone: false,
            dragArea: '#targetContainer',
            drag: (args) => {
                if (args.element.getAttribute('data-tooltip-id') === null) {
                    tooltipInstance.open(args.element);
                }
                else {
                    tooltipInstance.refresh(args.element);
                }
            },
            dragStart: (args) => {
                if (args.element.getAttribute('data-tooltip-id') === null) {
                    tooltipInstance.open(args.element);
                }
            },
            dragStop: (args) => {
                tooltipInstance.close();
            }
        });
    }
    return (<div id='targetContainer'>
        <TooltipComponent ref={t => tooltipInstance = t} target='#demoSmart' content='Drag me !!!' animation={tooltipAnimation}>
            <div id='demoSmart'>
            </div>
        </TooltipComponent>
    </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';
import { Draggable } from '@syncfusion/ej2-base';

function App() {
    React.useEffect(() => {
        rendereComplete();
    }, []);
    let tooltipInstance: TooltipComponent;
    let tooltipAnimation: Object = {
        open: { effect: 'None' },
        close: { effect: 'None' }
    };
    function rendereComplete() {
        let ele: HTMLElement = document.getElementById('demoSmart');
        let drag: Draggable = new Draggable(ele, {
            clone: false,
            dragArea: '#targetContainer',
            drag: (args: any) => {
                if (args.element.getAttribute('data-tooltip-id') === null) {
                    tooltipInstance.open(args.element);
                } else {
                    tooltipInstance.refresh(args.element);
                }
            },
            dragStart: (args: any) => {
                if (args.element.getAttribute('data-tooltip-id') === null) {
                    tooltipInstance.open(args.element);
                }
            },
            dragStop: (args: any) => {
                tooltipInstance.close();
            }
        });
    }
    return (<div id='targetContainer'>
        <TooltipComponent ref={t => tooltipInstance = t} target='#demoSmart' content='Drag me !!!' animation={tooltipAnimation}>
            <div id='demoSmart'>
            </div>
        </TooltipComponent>
    </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="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://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>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .wrap {
            margin: 5px;
        }

        .drop-inline {
            display: inline-block;
            margin-top: 10px;
            width: 150px;
        }

        .tooltip-box {
            background-color: #ececec;
            border: 1px solid #c8c8c8;
            box-sizing: border-box;
            margin: 80px auto;
            padding: 10px;
            width: 100px;
        }

        #details table th,
        #details table td {
            padding: 15px;
            text-align: left;
        }

        #details .info {
            font-weight: bold;
        }

        #sample,
        #clear {
            margin: 10px;
        }

        #targetContainer {
            border: 1px solid #c8c8c8;
            box-sizing: border-box;
            height: 350px;
            margin: 5px;
            overflow: hidden;
            position: relative;
        }

        #demoSmart {
            background: rebeccapurple;
            height: 40px;
            left: 35%;
            position: absolute;
            top: 35%;
            width: 40px;
        }

        #box {
            display: inline-block;
            margin: 60px;
        }

        #disabledbutton {
            pointer-events: none;
        }

        .blocks {
            background-color: #ececec;
            border: 1px solid #c8c8c8;
            box-sizing: border-box;
            display: inline-block;
            line-height: 50px;
            margin: 0 10px 10px 0;
            overflow: hidden;
            text-align: center;
            vertical-align: middle;
            width: 200px;
        }

        .blocks input {
            line-height: normal;
        }

        .circle-container {
            border: 1px solid #c8c8c8;
            box-sizing: border-box;
            height: 200px;
            margin-left: 10px;
            margin-right: 10px;
            position: relative;
        }

        .circle-tool {
            background: #9acd32;
            border-radius: 50px;
            height: 20px;
            position: absolute;
            width: 20px;
        }
    </style>
<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>

Mouse trailing

Tooltips can be positioned relative to the mouse pointer. This behavior can be enabled or disabled by using the mouseTrail property.
By default, it is set to false.

index.jsx
index.tsx
index.css
index.html
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 Content' mouseTrail={true} showTipPointer={false}>
        <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 Content' mouseTrail={true} showTipPointer={false}>
            <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;
}
<!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>

When mouse trailing option is enabled, the tip pointer position gets auto adjusted based on the target, and other position values like start, end, and middle are not applied (to prevent the pointer from moving out of target).

Setting offset values

Offset values are set to specify the distance between the target and Tooltip element. offsetX and offsetY properties are used to specify the offset left and top values.

offsetX specifies the distance between the target and Tooltip element on the X-axis.
offsetY specifies the distance between the target and Tooltip element on Y axis.

The following code example illustrates how to set offset values.

index.jsx
index.tsx
index.css
index.html
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" offsetX={30} offsetY={30} showTipPointer={false} mouseTrail={true} content='Tooltip Content'>
        <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" offsetX={30} offsetY={30} showTipPointer={false} mouseTrail={true} content='Tooltip Content'>
            <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;
}
<!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>

By default, collision is handled automatically. When a collision is detected, the Tooltip adjusts horizontally and flips vertically to fit within the visible area.