Position in EJ2 TypeScript Tooltip control

3 Mar 202521 minutes to read

Tooltips can be attached to 12 static locations around the target. When 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.

import { Tooltip } from '@syncfusion/ej2-popups';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Button } from '@syncfusion/ej2-buttons';

let button: Button = new Button({ content: 'Show Tooltip' });
button.appendTo('#tooltip');

let tooltip: Tooltip = new Tooltip({
  position: 'TopCenter',
  content: 'Tooltip Content'
});
tooltip.appendTo('#tooltip');

let dropDownListObject: DropDownList = new DropDownList({
  change: dropChange
});
dropDownListObject.appendTo('#positions');

function dropChange() {
  tooltip.close();
  tooltip.position = this.value;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Tooltip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.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='loader'>LOADING....</div>
    <div id='container'>
        <div id="tooltip"></div>
        <div class='ddl'>
            <select id="positions" class="form-control" style="width:150px">
                <option value="TopLeft">Top Left</option>
                <option value="TopCenter" selected>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>
    <style>
        #container {
            display: inline-block;
            position: relative;
            left: 50%;
            margin-top: 100px;
            transform: translateX(-50%);
        }

        #tooltip {
            display: inline-block;
            margin: 0 130px 0 0;
        }

        .ddl {
            display: inline-block;
            margin: 0 30px;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

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

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

import { Tooltip } from '@syncfusion/ej2-popups';
import { Button } from '@syncfusion/ej2-buttons';

let button: Button = new Button({ content: 'Show Tooltip' });
button.appendTo('#target');
let tooltip: Tooltip = new Tooltip({
    tipPointerPosition: "Start"
});
tooltip.appendTo('#target');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Tooltip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.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='loader'>LOADING....</div>
    <div id='container'>
        <div id="target" title="Tooltip content">
            <span>Show tooltip</span>
        </div>
    </div>
    <style>
        #target {
            position: relative;
            left: 50%;
            margin-top: 100px;
            transform: translateX(-50%)
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

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

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 using the refresh method, which auto-adjusts the Tooltip over the target.

import { Tooltip } from '@syncfusion/ej2-popups';
import { Draggable } from '@syncfusion/ej2-base';

let tooltip: Tooltip;
tooltip = new Tooltip({
    content: 'Drag me !!!',
    target: '#demoSmart',
    animation: { open: { effect: 'None' }, close: { effect: 'None' } }
}, '#targetContainer');
let element: HTMLElement = document.getElementById('demoSmart') as HTMLElement;
let drag: Draggable = new Draggable(element, {
    clone: false,
    dragArea: '#targetContainer',
    drag: (args: any) => {
        tooltip.refresh(args.element);
    },
    dragStart: (args: any) => {
        tooltip.open(args.element);
    },
    dragStop: (args: any) => {
        tooltip.close();
    }
});
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Tooltip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.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='loader'>LOADING....</div>
    <div id='container'>
        <div id="targetContainer">
            <div id="demoSmart">
            </div>
        </div>
    </div>
    <style>
        #targetContainer {
            border: 1px solid #c8c8c8;
            box-sizing: border-box;
            height: 360px;
            overflow: hidden;
            position: relative;
        }

        #demoSmart {
            background: rebeccapurple;
            height: 50px;
            left: 35%;
            position: absolute;
            top: 35%;
            width: 50px;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

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

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.

import { Tooltip } from '@syncfusion/ej2-popups';

let tooltip: Tooltip = new Tooltip({
    mouseTrail: true,
    content: 'Tooltip content'
});
tooltip.appendTo('#target');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Tooltip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.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='loader'>LOADING....</div>
    <div id='container'>
        <div id="target">
            Show tooltip
        </div>
    </div>
    <style>
        #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;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

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

When the mouse trailing option is enabled, the tip pointer position is 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 the target).

Setting offset values

Offset values are set to specify the distance between the target and the Tooltip element. The 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 the Y axis.

The following code example illustrates how to set offset values.

import { Tooltip } from '@syncfusion/ej2-popups';

let tooltip: Tooltip = new Tooltip({
    offsetX: 30,
    offsetY: 30,
    mouseTrail: true,
    showTipPointer: false,
    content: 'Tooltip content'
});
tooltip.appendTo('#target');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Tooltip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.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='loader'>LOADING....</div>
    <div id='container'>
        <div id="target">
            Show tooltip
        </div>
    </div>
    <style>
        #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;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

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

By default, collision is handled automatically; therefore, when a collision is detected, the Tooltip fits horizontally and flips vertically.