To animate the Tooltip, a set of specific animation effects are available, and it can be controlled using the animation
property.
The animation property also allows you to set delay, duration, and various other effects of your choice.
AnimationModel
is derived from base to apply the chosen animation effect, duration, etc. on Tooltips.
By default, Tooltip entrance occurs over 150 ms using the ease-out
timing function. It exits also at 150 ms,
but uses ease-in
timing function.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let TooltipAnimation = {
open: { effect: 'ZoomIn', duration: 1000, delay: 0 },
close: { effect: 'ZoomOut', duration: 500, delay: 0 }
};
return (<TooltipComponent className="tooltip-box" content='Tooltip animation effect' animation={TooltipAnimation}>
<div id='target'>Show Tooltip</div>
</TooltipComponent>);
}
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="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/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;
user-select: none;
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let TooltipAnimation: Object = {
open: { effect: 'ZoomIn', duration: 1000, delay: 0 },
close: { effect: 'ZoomOut', duration: 500, delay: 0 }
};
return (
<TooltipComponent className="tooltip-box" content='Tooltip animation effect' animation={TooltipAnimation}>
<div id='target'>Show Tooltip</div>
</TooltipComponent>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));
The default animation effect for the Tooltip is set to FadeIn
for its open action, and FadeOut
for its close action.
The default duration
is set to 150 ms and delay
is set to 0.
The animation effects that are applicable to Tooltips are:
When the effect
is specified as none
, no effect will be applied to the Tooltip, and animation is considered to be set to off
.
Some of the above animation effects suits the Tooltip better when its tip pointer is hidden. This can be achieved by setting the
showTipPointer
to false.
Animations can also be applied on Tooltips dynamically through open
and close
methods. These methods accept the animation model as an
optional parameter. If you pass TooltipAnimationSettings
, animation takes this model; otherwise, it takes the values from the
animation
property. It is also possible to pass different animations for Tooltips on each target.
Refer to the code snippet below to apply animations using public methods.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let tooltipInstance;
function handleClick() {
if (tooltipInstance.element.getAttribute('data-tooltip-id')) {
let closeAnimation = { effect: 'FadeOut', duration: 1000 };
tooltipInstance.close(closeAnimation);
}
else {
let openAnimation = { effect: 'FadeIn', duration: 1000 };
tooltipInstance.open(tooltipInstance.element, openAnimation);
}
}
;
return (<TooltipComponent className="tooltip-box" content='Tooltip content' opensOn='custom' ref={t => tooltipInstance = t}>
<div id='target' onClick={handleClick.bind(this)}>Click Here</div>
</TooltipComponent>);
}
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="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/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;
user-select: none;
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent, TooltipAnimationSettings } from '@syncfusion/ej2-react-popups';
function App() {
let tooltipInstance: TooltipComponent;
function handleClick(): void {
if (tooltipInstance.element.getAttribute('data-tooltip-id')) {
let closeAnimation: TooltipAnimationSettings = { effect: 'FadeOut', duration: 1000 };
tooltipInstance.close(closeAnimation);
} else {
let openAnimation: TooltipAnimationSettings = { effect: 'FadeIn', duration: 1000 };
tooltipInstance.open(tooltipInstance.element,openAnimation);
}
};
return (
<TooltipComponent className="tooltip-box" content='Tooltip content' opensOn='custom' ref={t => tooltipInstance = t}>
<div id='target' onClick={handleClick.bind(this)}>Click Here</div>
</TooltipComponent>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));
The transition effect can be applied on Tooltips by using the beforeRender
event as given in the
following work-around code example.
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let tooltipInstance;
let TooltipAnimation = {
open: { effect: 'ZoomIn', duration: 500 },
close: { effect: 'ZoomOut', duration: 500 }
};
function onBeforeRender(args) {
if (args.element) {
tooltipInstance.animation = { open: { effect: 'None' } };
args.element.style.display = 'block';
args.element.style.transitionProperty = 'left,top';
args.element.style.transitionDuration = '1000ms';
}
}
;
function onAfterClose(args) {
tooltipInstance.animation = TooltipAnimation;
}
;
let c1 = {
top: '18%',
left: '5%'
};
let c2 = {
top: '30%',
left: '30%'
};
let c3 = {
top: '80%',
left: '80%'
};
let c4 = {
top: '65%',
left: '50%'
};
let c5 = {
top: '75%',
left: '15%'
};
let c6 = {
top: '30%',
left: '70%'
};
return (<div className='wrap'>
<h3> Transition effect </h3>
<TooltipComponent className='circle-container' target='.circle-tool' animation={TooltipAnimation} closeDelay={1000} ref={t => tooltipInstance = t} beforeRender={onBeforeRender.bind(this)} afterClose={onAfterClose.bind(this)}>
<div className="circle-tool" style={c1} title="This is Turtle !!!"></div>
<div className="circle-tool" style={c2} title="This is Snake !!!"></div>
<div className="circle-tool" style={c3} title="This is Croc !!!"></div>
<div className="circle-tool" style={c4} title="This is String Ray !!!"></div>
<div className="circle-tool" style={c5} title="This is Blob Fish !!!"></div>
<div className="circle-tool" style={c6} title="This is Mammoth !!!"></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="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/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%;
}
.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: 360px;
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;
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-react-popups';
function App() {
let tooltipInstance: TooltipComponent;
let TooltipAnimation: Object = {
open: { effect: 'ZoomIn', duration: 500 },
close: { effect: 'ZoomOut', duration: 500 }
};
function onBeforeRender(args: TooltipEventArgs): void {
if (args.element) {
tooltipInstance.animation = { open: { effect: 'None' } };
args.element.style.display = 'block';
args.element.style.transitionProperty = 'left,top';
args.element.style.transitionDuration = '1000ms';
}
};
function onAfterClose(args: TooltipEventArgs): void {
tooltipInstance.animation = TooltipAnimation;
};
let c1: Object = {
top: '18%',
left: '5%'
};
let c2: Object = {
top: '30%',
left: '30%'
};
let c3: Object = {
top: '80%',
left: '80%'
};
let c4: Object = {
top: '65%',
left: '50%'
};
let c5: Object = {
top: '75%',
left: '15%'
};
let c6: Object = {
top: '30%',
left: '70%'
};
return (
<div className='wrap'>
<h3> Transition effect </h3>
<TooltipComponent className='circle-container' target='.circle-tool' animation={TooltipAnimation} closeDelay={1000} ref={t => tooltipInstance = t} beforeRender={onBeforeRender.bind(this)} afterClose={onAfterClose.bind(this)}>
<div className="circle-tool" style={c1} title="This is Turtle !!!"></div>
<div className="circle-tool" style={c2} title="This is Snake !!!"></div>
<div className="circle-tool" style={c3} title="This is Croc !!!"></div>
<div className="circle-tool" style={c4} title="This is String Ray !!!"></div>
<div className="circle-tool" style={c5} title="This is Blob Fish !!!"></div>
<div className="circle-tool" style={c6} title="This is Mammoth !!!"></div>
</TooltipComponent>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));