Creating animated tooltips with CSS3

Articles about the creation of tooltips more than once climbed habr [ 1 , 2 ] in view of the great popularity of this element. Today, you will learn another way to create simple, animated hints using the before and after pseudo-elements, as well as transitions properties.



As an example , the icons of social services were made, when pointing to which the names of these services are shown.
')

So let's get started.

Unordered list of services:

<ul class="tt-wrapper"> <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li> <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li> <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li> <li><a class="tt-facebook" href="#"><span>Facebook</span></a></li> <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li> <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li> </ul> 

The main style for icons and additional styles for their positioning.

 .tt-wrapper li a{ display: block; width: 68px; height: 70px; margin: 0 2px; outline: none; background: transparent url(../images/icons.png) no-repeat top left; position: relative; } .tt-wrapper li .tt-gplus { background-position: 0px 0px; } .tt-wrapper li .tt-twitter{ background-position: -68px 0px; } .tt-wrapper li .tt-dribbble{ background-position: -136px 0px; } .tt-wrapper li .tt-facebook{ background-position: -204px 0px; } .tt-wrapper li .tt-linkedin{ background-position: -272px 0px; } .tt-wrapper li .tt-forrst{ background-position: -340px 0px; } 

Inside the elements we hide the tooltips, pre-setting zero transparency, and the rate of "ascent" will be equal to 0.3. In the first example, tooltips will appear at the top, so we place them 100 pixels above the icons.

 .tt-wrapper li a span{ width: 100px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -64px; font-family: 'Alegreya SC', Georgia, serif; font-weight: 400; font-style: italic; font-size: 14px; color: #719DAB; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #fff; background: rgba(255,255,255,0.3); text-indent: 0px; border-radius: 5px; position: absolute; bottom: 100px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); transition: all 0.3s ease-in-out; } 

The appearance occurs when you hover the cursor over the icons or when you hover over the place where the tooltip itself is located. The pointer will be made using the pseudo-elements before and after and will be a triangle with a small shadow.

 .tt-wrapper li a span:before, .tt-wrapper li a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1); } .tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #fff; } 

At the very hover, we will increase the block transparency with a hint to 0.9 and set the appearance border.

 .tt-wrapper li a:hover span{ opacity: 0.9; bottom: 70px; } 

Here is such a simple way. In the demo, you can see three other examples. Sources can be downloaded here .

Unfortunately, the examples will only work in browsers that support pseudo-elements and the transitions property.