Tooltips animation

Animated With Tooltip

This is a way to generate tooltips animated not only requires to be implemented anywhere. Obviously, as many of these things, the animation will not work in all browsers but the tooltip will be visible without problems. The HTML is simple, only an ordered list inside a DIV:

<div id="masterpanel">
  <ul> id="mainpanel">
    <li> <a href="#" class="picasa"> <small> open Picasa </ small> </ a> </ li>
    <li> <a href="#" class="stumble"> <small> send Stumble </ small> </ a> </ li>
    <li> <a href="#" class="twitter"> <small> share Twitterr </ small> </ a> </ li>
    <li> <a href="#" class="youtube"> <small> YouTube channel </ small> </ a> </ li>
    <li> <a href="#" class="facebook"> <small> share on Facebook </ small> </ a> </ li>
  </ Ul>
</ Div>

Each LI tag contains a link with a different class and the content is text which we will see in the tooltip . Obviously, the key is the CSS:

<style>
# Masterpanel {/ * this is the main container * /}
# Masterpanel ul {/ * the list * /
  list-style: none;
  padding: 0;
  margin: 0;
}
# Masterpanel ul li {/ * each item in the list * /
  padding: 0;
  margin: 0;
  position: relative;
}

/ * This is the link * /
# Masterpanel ul li a {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 50% 0;
  text-decoration: none;
  margin: 0 5px; / * the separation between them * /
  float: left; / * next to each other * /
  position: relative;
  padding: 0 20px;
  / * The size of the images * /
  height: 60px;
  width: 60px;
}

/ * Images are the funds of those links * /
a.tpicasa {background-image: url (image1);}
a.tstumble {background-image: url (image2);}
a.ttwitter {background-image: url (image3);}
a.tyoutube {background-image: url (image4);}
a.tfacebook {background-image: url (image5);}

/ * Tooltip text will be hidden * /
# Masterpanel to small {
  background-color: Brown;
  border-radius: 10px;
  color: # FFF;
  display: none;
  font-size: 11px;
  line-height: 1;
  padding: 5px;
  text-align: center;
  width: 90px; / * the actual width of the link * /
}

/ * Hover effect * visible to tooltip /
# Masterpanel a: hover small { 
  display: block; 
  left: 0; 
  margin-top:-35px; 
  position: absolute; 
  top: 0;
  z-index: 9999;
  / * Animation for Firefox and Chrome / Safari * /
  -Moz-animation: mymove .25 s linear;
  -Webkit-animation: mymove .25 s linear; 
}

/ * Animation rules for each of the browsers * /
@-Moz-keyframes mymove {
  0% {-moz-transform: scale (0.0); opacity: 0;}
  50% {-moz-transform: scale (1.2,1.2); opacity: 0.3;}
  75% {-moz-transform: scale (0.9,0.9); opacity: 0.7;}
  100% {-moz-transform: scale (1.1); opacity: 1;}
}
@-Webkit-keyframes mymove {
  0% {-webkit-transform: scale (0.0); opacity: 0;}
  50% {-webkit-transform: scale (1.2,1.2); opacity: 0.3;}
  75% {-webkit-transform: scale (0.9,0.9); opacity: 0.7;}
  100% {-webkit-transform: scale (1.1); opacity: 1;}
}
</ Style>

0 comments:

Post a Comment

Powered by Blogger.

Copyright © / webeXquisite : Site Management

Template by : webeXquisite / powered by :blogger