HOW TO CREATE ANIMATED EFFECT SLIDE FROM THE BOTTOM TO THE TOP ON TOOLTIP

HOW TO CREATE ANIMATED EFFECT SLIDE FROM THE BOTTOM TO THE TOP ON TOOLTIP | HTML5 & CSS3

What is tooltip?
tooltip is a simple solutions, solutions for you, if you are confuse or not understand about something, tooltip can help you with the simple solutions.
How to create a tooltip with effect slide?
Lets Try the demo below.

<br /> TOOLTIP<br />

Tooltip with effect slide from the bottom to the
top

Tips to try the demo:

Hover the button below (for computer user) |
Click the button below (for mobile phone user )

Tooltip with effect slide from the bottom to the
top.

Try it yourself.

< <!DOCTYPE html><br />
<html><br />
<head><br />
<meta name="viewport" content="initial-scale=1"><br />
<style type=
"text/css">
/*------------- content-------------*/
}
body
{
background-color : #f5f5f5;
}

.content-wrapper
{
padding : 10px 15px;
text-align : center;
}

.content-title
{
font-size : 24px;
margin : auto;
}

.demo
{
margin-top : 10px;
background-color : #eee;
padding : 5px;
}

.tooltip
{
position : relative;
display : inline-block;
}

.tooltip .tip-top
{
visibility : hidden;
width : 200px;
background-color : #26b14c;
color : #f5f5f5;
text-shadow : 1px 1px 1px #86b14c;
text-align : center;
border-radius : 6px;
padding : 5px 0;
position : absolute;
z-index : 1;
bottom : 130%;
left : 50%;
margin-left : -100px;
opacity : 0;
-webkit-transition : opacity 1s;
transition : opacity 1s;
-webkit-box-shadow : 0 3px 9px #000;
box-shadow : 0 3px 9px #000;
}

.tooltip .tip-top::after
{
content : "";
position : absolute;
top : 100%;
left : 60%;
margin-left : -30px;
border-width : 7px;
border-style : solid;
border-color : #26b14c transparent transparent transparent;
}

.tooltip:hover .tip-top
{
visibility : visible;
opacity : 1;
-webkit-animation : slide .8s linear 0s 1;
animation : slide .8s linear 0s 1;
}

.button-yellow
{
background-color : #ffbb00;
color : #444444;
-webkit-box-shadow : inset -0 -3px 9px #000;
box-shadow : inset -0 -3px 9px #000;
padding : 5px 10px;
border : none;
border-radius : 3px;
}

/*-------- slide effect ----------*/
@-webkit-keyframes slide
{
from{ opacity : 0.0;
bottom : -500%;
}

to
{
opacity : 1.0;
bottom : 130%;
}

}
@keyframes slide
{
from{ opacity : 0.0;
bottom : -500%;
}

to
{
opacity : 1.0;
bottom : 130%;
}
</style><br />
<title><br />
TOOLTIP<br />
</title><br />
</head><br />
<body><br />
<div class="content-wrapper"><div class="content-title">Tooltip with effect slide from the bottom to the<br />
top<br />
</div><div class="demo"><h4>Tips to try the demo:<br />
</h4>Hover the button below (for computer user) |<br />
Click the button below (for mobile phone user )<br />
</div><h4>Tooltip with effect slide from the bottom to the<br />
top.<br />
</h4><button class="button-yellow tooltip">Tooltip<br />
<span
class="tip-top">My tips for you, After you play the<br />
demo, you must be try yourself, more practice more<br />
experience..<br />
</span><br />
</button><br />
</div></body><br />
</html>

Okay, this article is continuing with article about tooltip before, let's go to the discussion.

How to create animated effect slide from the bottom to the top on tooltip?

look at this code:

/*-------- slide effect ----------*/
@-webkit-keyframes slide
{
from{ opacity : 0.0;
bottom : -500%;
}

to
{
opacity : 1.0;
bottom : 130%;
}

}
@keyframes slide
{
from{ opacity : 0.0;
bottom : -500%;
}

to
{
opacity : 1.0;
bottom : 130%;
}
}

The code @-webkit-keyframes and @keyframes is the key of all animation my tooltip, its while make the slide from the bottom to the top.
Next, The code from and to can be inserted with the all css property, like opacity, background, and etc.
You can change the code from and to with percent.
example:

@-webkit-keyframes slide
{
0%{ opacity : 0.0;
bottom : -500%;
}

100%
{
opacity : 1.0;
bottom : 130%;
}

}
@keyframes slide
{
0%{ opacity : 0.0;
bottom : -500%;
}

100%
{
opacity : 1.0;
bottom : 130%;
}

.
And than, How to invert the effect slide?
wow, its a great ask.
You can make it easy, follow this step.
Change the property bottom: -500% with bottom: 500% on the @-webkit-keyframes and @keyframes.
but, if you lazy for change it, you can copy this code.

And this is the end of paragraph about invert animation.

How to play the animation?
Look and read the text below:

1. For safari, chrome, opera:
-webkit-animation: animation-name ,animation-duration, animation-timing-function, animation-delay, animation iteration-count, animation-direction.

2. Standard syntax:
animation: animation-name ,animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction.

Example:

-webkit-animation : slide .8s linear 0s 1;
animation : slide .8s linear 0s 1;

Property And Description:
1. @keyframes :
*The animation Code

2. animation :
*Property for setting all the animation properties

3. animation-name:
*property for setting the name of your animation

4. animation-duration:
*property for setting how long the animation will be play ( on seconds or miliseconds).

5. animation-timing-function:
*property for setting the speed curve of the animation ( linear, ease, ease-in, ease-out, ease-in-out)

6. animation-delay:
*property for setting a delay for the start of the animation

7. animation-iteration-count:
*property for setting the number of times an animation should be played.

(infinite or Number.
if you use infinite: The animation should be played forever.
But if you use the number like 1,2,3 and etc. : The animation should be played like the number of times. )

8. animation-direction:
*property for let an animation run in reverse direction or alternate.

if you have any ask or suggestion, please sent your ask or suggestion using the form comment on this blog.
Thank you.
Happy reading show.

What's next?
HOW TO CREATE ANIMATED EFFECT ZOOM ON TOOLTIP | HTML5 & CSS3

7 KILOMETER