HOW TO CREATE ANIMATED EFFECT FADE ON TOOLTIP

HOW TO CREATE ANIMATED EFFECT FADE 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?
Thats good ask, okay.. lets go to the DEMO and try it yourself.

<br /> TOOLTIP<br />

Tooltip with effect fade

Tips to try the demo:

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

Tooltip with effect fade.

This is the code of the demo above, 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;
}

.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 : #ffbb00;
color : #000;
text-shadow : 1px 1px 1px #ffbb55;
text-align : center;
border-radius : 6px;
padding : 5px 0;
position : absolute;
z-index : 1;
bottom : 120%;
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 : 50%;
margin-left : -30px;
border-width : 7px;
border-style : solid;
border-color : #ffbb00 transparent transparent transparent;
}

.tooltip:hover .tip-top
{
visibility : visible;
opacity : 1;
}

.tooltip .tip-right
{
visibility : hidden;
width : 200px;
background-color : #ffbb00;
color : #000;
text-shadow : 1px 1px 1px #ffbb55;
text-align : center;
border-radius : 3px;
padding : 5px 0;
position : absolute;
z-index : 1;
bottom : -20%;
left : 200%;
margin-left : -85px;
opacity : 0;
-webkit-transition : opacity 1s;
transition : opacity 1s;
-webkit-box-shadow : 0 5px 9px #000;
box-shadow : 0 5px 9px #000;
}

.tooltip .tip-right::after
{
content : "";
position : absolute;
top : 20%;
left : -20%;
margin-left : 26px;
border-width : 7px;
border-style : solid;
border-color : transparent #ffbb00 transparent transparent;
}

.tooltip:hover .tip-right
{
visibility : visible;
opacity : 1;
}

.tooltip .tip-left
{
visibility : hidden;
width : 200px;
background-color : #ffbb00;
color : #000;
text-shadow : 1px 1px 1px #ffbb55;
text-align : center;
border-radius : 3px;
padding : 5px 0;
position : absolute;
z-index : 1;
bottom : 20%;
left : -165%;
margin-left : -85px;
opacity : 0;
-webkit-transition : opacity 1s;
transition : opacity 1s;
-webkit-box-shadow : 0 5px 9px #000;
box-shadow : 0 5px 9px #000;
}

.tooltip .tip-left::after
{
content : "";
position : absolute;
top : 20%;
left : 115%;
margin-left : -30px;
border-width : 7px;
border-style : solid;
border-color : transparent transparent transparent #ffbb00;
}

.tooltip:hover .tip-left
{
visibility : visible;
opacity : 1;
}

.tooltip .tip-bottom::after
{
content : "";
position : absolute;
top : -50%;
left : 20%;
margin-left : 26px;
border-width : 7px;
border-style : solid;
border-color : transparent transparent #ffbb00 transparent;
}

.tooltip:hover .tip-bottom
{
visibility : visible;
opacity : 1;
}

.button-blue
{
background-color : #4d90fe;
color : #fff;
-webkit-box-shadow : inset -0 -3px 9px #000;
box-shadow : inset -0 -3px 9px #000;
padding : 5px 10px;
border : none;
border-radius : 3px;
}
</style><br />
<title><br />
TOOLTIP<br />
</title><br />
</head><br />
<body><br />
<div class="content-wrapper"><div class="content-title">Tooltip with effect fade<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 fade.<br />
</h4><button class="button-blue tooltip">Tooltip<br />
<span
class="tip-right">Hai, could you found<br />
me?<br />
</span><br />
</button> <br />
<button class=
"button-blue tooltip">Tooltip<br />
<span class="tip-top">I'm<br />
not here...<br />
</span><br />
</button> <br />
<button class=
"button-blue tooltip">Tooltip<br />
<span class=
"tip-left">Haha, Wrong place<br />
</span><br />
</button> <br />
<button
class="button-blue tooltip">Tooltip<br />
<span class=
"tip-bottom">Wow, You found me<br />
</span><br />
</button><br />
</div></body><br />
</html>

In this experiment we use transition on css3 to create the effect fade,
with transition we can make slow motion.
Look at this code:

-webkit-transition : opacity 1s;
transition : opacity 1s;

The code above is used to create effect fade in.

And than look at this code:

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

The code above is used to wrap your text tooltip, and that is the main button to show your text tooltip.
Next, look at the code below:

.tooltip .tip-bottom
{
visibility : hidden;
width : 200px;
background-color : #ffbb00;
color : #000;
text-shadow : 1px 1px 1px #ffbb55;
text-align : center;
border-radius : 3px;
padding : 5px 0;
position : absolute;
z-index : 1;
bottom : -105%;
left : 50%;
margin-left : -50px;
opacity : 0;
-webkit-transition : opacity 1s;
transition : opacity 1s;
-webkit-box-shadow : 0 5px 9px #000;
box-shadow : 0 5px 9px #000;
}

.tooltip .tip-bottom::after
{
content : "";
position : absolute;
top : -50%;
left : 20%;
margin-left : 26px;
border-width : 7px;
border-style : solid;
border-color : transparent transparent #ffbb00 transparent;
}

The code above is used to create background and little arrow of your tips.
Next, this code .tooltip .tip-bottom
{
visibility : hidden;
width : 200px;
background-color : #ffbb00;
color : #000;
text-shadow : 1px 1px 1px #ffbb55;
text-align : center;
border-radius : 3px;
padding : 5px 0;
position : absolute;
z-index : 1;
bottom : -105%;
left : 50%;
margin-left : -50px;
opacity : 0;
-webkit-transition : opacity 1s;
transition : opacity 1s;
-webkit-box-shadow : 0 5px 9px #000;
box-shadow : 0 5px 9px #000;
} is used to create a background of text tooltip and make your tips is not show.
and than, this code .tooltip .tip-bottom::after
{
content : "";
position : absolute;
top : -50%;
left : 20%;
margin-left : 26px;
border-width : 7px;
border-style : solid;
border-color : transparent transparent #ffbb00 transparent;
} is used to create a little arrow on your tips. and this code is used too to create a little arrow with position : on the left, on the right, on the top, or on the bottom ).

How to change the position?
wow, its a great ask. we use the css3.
Example:
Top: 26px,Left: -20px,Margin-left: 25px.

The example above is used to change the position of a tooltip. You can change your position of a tooltip like you feel good.

Finally, How to show my tooltip on hover?
okay, look at me... hahaha
we use this code
.tooltip:hover .tip-bottom
{
visibility : visible;
opacity : 1;
}
the .tooltip:hover thats make your tooltip will be show on hover.

and this is end of my article, please try it yourself. my article is not a long article, and i want you to more practice than you read a long article and make you confuse.

So, more practice is better than read a long text. but, the practice and teori must be balance.

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

The end.
Happy reading show.

What's next?
HOW TO CREATE ANIMATED EFFECT SLIDE FROM THE LEFT TO THE RIGHT ON TOOLTIP| HTML5 & CSS3

7 KILOMETER

HOW TO CREATE ANIMATED EFFECT FADE ON TOOLTIP | HTML5 & CSS3

Tips to try the demo:

Tooltip with effect fade.

Komentar

Posting Komentar