zplus
3/17/2015 - 11:28 AM

ToolTips4CSS3

ToolTips4CSS3

/*Global*/
html { width: 100%; height: 100%; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none; }
body { margin: 0; padding: 0; width: 100%; height: 100%; background: #47c9af; color: #74777b; font-weight: 300; font-size: 1.5em; font-family: "Raleway", "Arail"; }
ul { margin: 0; padding: 0; list-style: none; }
a { outline: none; text-decoration: none; }
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; }
*:after, *:before { display: block; content: ""; }
*:after { clear: both; }
/*Navigator*/
.nav { margin: 200px auto; width: 800px; height: 300px; }
.nav li { display: inline-block; margin: 0 1em; }
.tooltip { position: relative; display: inline-block; padding: .15em .25em 0; color: rgba(0, 0, 0, .3); font-weight: 700; -webkit-transition: color .3s; }
.tooltip-content { position: absolute; bottom: 100%; left: 50%; margin-bottom: 20px; margin-left: -40px; padding-top: 25px; width: 80px; height: 80px; border-radius: 9999px; background: #fff; color: #47c9af; text-align: center; opacity: 0; -webkit-transition: all .3s; }
.tooltip-content i { opacity: 0; -webkit-transition: all .3s; }
.tooltip-content::after { position: absolute; top: 100%; left: 50%; display: block; margin: -7px 0 0 -15px; width: 30px; height: 20px; background: url("../img/tooltip1.svg") no-repeat 50% 50%; background-size: contain; content: ""; }
/*hover*/
.tooltip:hover { color: rgba(255, 255, 255, 1); }
.tooltip:hover .tooltip-content, .tooltip:hover .tooltip-content i { opacity: 1; -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 0deg) scale3d(1, 1, 1); }
/*Animate*/
.tooltip-effect-1 .tooltip-content { -webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg); -webkit-transform-origin: 50% 100%; }
.tooltip-effect-1 .tooltip-content i { -webkit-transform: scale3d(0, 0, 1); }
.tooltip-effect-2 .tooltip-content { -webkit-transform: translate3d(0, 20px, 0); }
.tooltip-effect-2 .tooltip-content i { -webkit-transform: translate3d(0, 15px, 0); }
.tooltip-effect-3 .tooltip-content { -webkit-transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg); -webkit-transform-origin: 50% 100%; }
.tooltip-effect-3 .tooltip-content i { -webkit-transform: scale3d(0, 0, 1); }
.tooltip-effect-4 .tooltip-content { -webkit-transform: translate3d(0, -20px, 0); }
.tooltip-effect-4 .tooltip-content i { -webkit-transform: translate3d(0, 20px, 0); }
.tooltip-effect-5 .tooltip-content { -webkit-transform: scale3d(0, 0, 1); -webkit-transform-origin: 50% 100%; }
.tooltip-effect-5 .tooltip-content i { -webkit-transform: translate3d(0, 20px, 0); }
<link rel="stylesheet" href="http://apps.bdimg.com/libs/fontawesome/4.2.0/css/font-awesome.min.css"/>
<div class="nav">
    <ul>
        <li>
            <a href="#" class="tooltip tooltip-effect-1">Home
                <span class="tooltip-content">
                    <i class="fa fa-home"></i>
                </span>
            </a>
        </li>
        <li>
            <a href="#" class="tooltip tooltip-effect-2">About me
                <span class="tooltip-content">
                    <i class="fa fa-user"></i>
                </span>
            </a>
        </li>
        <li>
            <a href="#" class="tooltip tooltip-effect-3">Photography
                <span class="tooltip-content">
                    <i class="fa fa-camera-retro"></i>
                </span>
            </a>
        </li>
        <li>
            <a href="#" class="tooltip tooltip-effect-4">Work
                <span class="tooltip-content">
                    <i class="fa fa-briefcase"></i>
                </span>
            </a>
        </li>
        <li>
            <a href="#" class="tooltip tooltip-effect-5">Contact
                <span class="tooltip-content">
                    <i class="fa fa-envelope"></i>
                </span>
            </a>
        </li>
    </ul>
</div>