Animation in React Tooltip component

28 Jan 202524 minutes to read

The Tooltip can be animated using a set of specific animation effects, which can be controlled using the animation property.

The animation property also allows you to set delay, duration, and various other effects of your choice.

The AnimationModel is derived from the base model to apply the chosen animation effect, duration, and other properties to 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.

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() {
    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'));
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'));
#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;
}
<!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>

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.

Animation effects

The following animation effects are available for Tooltips:

FadeIn
FadeOut
FadeZoomIn
FadeZoomOut
FlipXDownIn
FlipXDownOut
FlipXUpIn
FlipXUpOut
FlipYLeftIn
FlipYLeftOut
FlipYRightIn
FlipYRightOut
ZoomIn
ZoomOut
None

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 suit the Tooltip better when its tip pointer is hidden.
This can be achieved by setting the showTipPointer to false.

Animating via open/close methods

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, the animation uses this model; otherwise, it uses the values from the animation property. It is also possible to apply different animations to Tooltips for each target element.

Refer to the code snippet below to apply animations using public methods.

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() {
    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'));
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'));
#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;
}
<!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>

Apply transition

A transition effect can be applied to Tooltips by using the beforeRender event, as demonstrated in the following code example.

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() {
    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'));
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'));
#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;
}
<!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>