CSS3 implements the Tooltip prompt box to fly in and out the animation, css3tooltip

CSS3 implements the Tooltip prompt box to fly in and out the animation, css3tooltip

We have seen a lot of Tooltip boxes created using background images, but the disadvantage is that expansion is troublesome and images need to be changed frequently. There is also the use of multi-layer CSS stack implementation, but the effect is relatively stiff, the appearance is not very good. Today, I will share with you how to use CSS3 to quickly implement a beautiful and practical Tooltip prompt box, which is accompanied by an animated Effect of flying in and out. Let's take a look.

It looks simple. In fact, the idea of implementation is indeed very simple.

For more information, see the Online Demo.

Next, we will briefly analyze the CSS3 Code implemented by this Tooltip.

The first step is the HTML code. It mainly constructs three small icon menus and the corresponding Tooltip prompt box content:

<div id="container"><div class="item">      
The following is the CSS code. First, we define an icon set so that each small button can display its own icons:
@font-face {    font-family:'HeydingsCommonIconsRegular';    src: url('http://ianfarb.com/random/heydings_icons-webfont.eot');    src: url('http://ianfarb.com/random/heydings_icons-webfont.eot?#iefix') format('embedded-opentype'),         url('http://ianfarb.com/random/heydings_icons-webfont.woff') format('woff'),         url('http://ianfarb.com/random/heydings_icons-webfont.ttf') format('truetype'),         url('http://ianfarb.com/random/heydings_icons-webfont.svg#HeydingsCommonIconsRegular') format('svg');    font-weight: normal;    font-style: normal;}
h1    {font-family:'HeydingsCommonIconsRegular', sans-serif;       font-weight:normal;       margin:30px 0 0 0;       color:#fff;  text-align:center;       font-size:60px;       line-height:30px;}
The focus is to implement the Tooltip prompt box:
.tooltip { width:120px;           padding:10px;           border-radius:3px;           position:absolute;           box-shadow:1px 1px 10px 0 #ccc;           margin: -500px 0 0 -20px;           background:#fff;           -webkit-transition:margin .5s ease-in-out;          -moz-transition:margin .5s ease-in-out;}.item:hover  {  background:#6d643b;}.item:hover .tooltip {           margin:-145px 0 0 -20px;           -webkit-transition: margin .15s ease-in-out;  -moz-transition: margin .15s ease-in-out;}.arrow {  position:absolute;  margin:10px 0 0 50px;    width: 0;     height: 0;     border-left: 10px solid transparent;    border-right: 10px solid transparent;    border-top: 10px solid #fff;}
The Tooltip area is rendered with rounded corners and shadows, so that the mouse slides over and passes in, and the mouse moves out to fly out. We can see that this effect is mainly used.
-Webkit-transition and-moz-transition
Finally, a small downward arrow is marked with class. arrow. The above Code also implements this CSS.