Tooltips can be attached to 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.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent, Position } from '@syncfusion/ej2-react-popups';
class App extends React.Component<{}, {}> {
private dropElement: HTMLSelectElement;
private tooltipInstance: TooltipComponent;
public change(): void {
this.tooltipInstance.position = this.dropElement.value as Position;
}
render() {
return (
<div id='container'>
<TooltipComponent ref={t => this.tooltipInstance = t} className="tooltip-box" content='Tooltip Content' target='#tooltip'>
<div id="tooltip">Show Tooltip</div>
</TooltipComponent>
<div class='ddl'>
<select id="positions" ref={d => this.dropElement = d} onChange={this.change.bind(this)} className="form-control drop-inline">
<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>
);
}
}
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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%;
}
#container {
display: inline-block;
position: relative;
left: 50%;
margin-top: 100px;
transform: translateX(-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;
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
class App extends React.Component {
change() {
this.tooltipInstance.position = this.dropElement.value;
}
render() {
return (<div id='container'>
<TooltipComponent ref={t => this.tooltipInstance = t} className="tooltip-box" content='Tooltip Content' target='#tooltip'>
<div id="tooltip">Show Tooltip</div>
</TooltipComponent>
<div class='ddl'>
<select id="positions" ref={d => this.dropElement = d} onChange={this.change.bind(this)} className="form-control drop-inline">
<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>);
}
}
ReactDom.render(<App />, document.getElementById('sample'));
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 that 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 * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
class App extends React.Component<{}, {}> {
render() {
return (
<TooltipComponent className="tooltip-box" content='Tooltip Content' tipPointerPosition='Start' target='#target'>
<button className="e-btn" id='target'>Show Tooltip</button>
</TooltipComponent>
);
}
}
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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>
#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%)
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
class App extends React.Component {
render() {
return (<TooltipComponent className="tooltip-box" content='Tooltip Content' tipPointerPosition='Start' target='#target'>
<button className="e-btn" id='target'>Show Tooltip</button>
</TooltipComponent>);
}
}
ReactDom.render(<App />, document.getElementById('sample'));
By default, tip pointers are auto adjusted so that the arrow does not point outside the target element.
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.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { Draggable } from '@syncfusion/ej2-base';
class App extends React.Component<{}, {}> {
private tooltipInstance: TooltipComponent;
private tooltipAnimation: Object = {
open: { effect: 'None' },
close: { effect: 'None' }
};
public componentDidMount(): void {
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) {
this.tooltipInstance.open(args.element);
} else {
this.tooltipInstance.refresh(args.element);
}
},
dragStart: (args: any) => {
if (args.element.getAttribute('data-tooltip-id') === null) {
this.tooltipInstance.open(args.element);
}
},
dragStop: (args: any) => {
this.tooltipInstance.close();
}
});
}
render() {
return (<div id='targetContainer'>
<TooltipComponent ref={t => this.tooltipInstance = t} target='#demoSmart' content='Drag me !!!' animation={this.tooltipAnimation}>
<div id='demoSmart'>
</div>
</TooltipComponent>
</div>
);
}
}
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</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';
class App extends React.Component {
constructor() {
super(...arguments);
this.tooltipAnimation = {
open: { effect: 'None' },
close: { effect: 'None' }
};
}
componentDidMount() {
let ele = document.getElementById('demoSmart');
let drag = new Draggable(ele, {
clone: false,
dragArea: '#targetContainer',
drag: (args) => {
if (args.element.getAttribute('data-tooltip-id') === null) {
this.tooltipInstance.open(args.element);
}
else {
this.tooltipInstance.refresh(args.element);
}
},
dragStart: (args) => {
if (args.element.getAttribute('data-tooltip-id') === null) {
this.tooltipInstance.open(args.element);
}
},
dragStop: (args) => {
this.tooltipInstance.close();
}
});
}
render() {
return (<div id='targetContainer'>
<TooltipComponent ref={t => this.tooltipInstance = t} target='#demoSmart' content='Drag me !!!' animation={this.tooltipAnimation}>
<div id='demoSmart'>
</div>
</TooltipComponent>
</div>);
}
}
ReactDom.render(<App />, document.getElementById('sample'));
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 * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
class App extends React.Component<{}, {}> {
render() {
return (
<TooltipComponent className="tooltip-box" content='Tooltip Content' mouseTrail={true} showTipPointer={false}>
<div id='target'>Show Tooltip</div>
</TooltipComponent>
);
}
}
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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>
#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;
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
class App extends React.Component {
render() {
return (<TooltipComponent className="tooltip-box" content='Tooltip Content' mouseTrail={true} showTipPointer={false}>
<div id='target'>Show Tooltip</div>
</TooltipComponent>);
}
}
ReactDom.render(<App />, document.getElementById('sample'));
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).
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 in X axis.offsetY
specifies the distance between the target and Tooltip element in Y axis.The following code example illustrates how to set offset values.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
class App extends React.Component<{}, {}> {
render() {
return (
<TooltipComponent className="tooltip-box" offsetX={30} offsetY={30} showTipPointer={false} mouseTrail={true} content='Tooltip Content'>
<div id='target'>Show Tooltip</div>
</TooltipComponent>
);
}
}
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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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>
#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;
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
class App extends React.Component {
render() {
return (<TooltipComponent className="tooltip-box" offsetX={30} offsetY={30} showTipPointer={false} mouseTrail={true} content='Tooltip Content'>
<div id='target'>Show Tooltip</div>
</TooltipComponent>);
}
}
ReactDom.render(<App />, document.getElementById('sample'));
By default, collision is handled automatically and therefore when collision is detected the Tooltip fits horizontally and flips vertically.