Animated tooltip

Tooltip fades in (also moves in on Y axis) and is placed on a time to fadeout

by Ryan Archer

HTML

<h1>
Animated tooltip
</h1>

<div class="tooltip">
This is an animated tooltip
</div>

CSS

body { font-family: helvetica, arial, verdana }

.tooltip {
    background-position: 93.5% bottom; 
    position: absolute;
    background:gold;
    padding-bottom: 15px;
    right:20px;
    top: 40px;
    padding: 10px;
    border-radius: 5px;
    width: 220px;
    z-index: 200;
    opacity: 0;
    display: inline-block;
    animation: zippyTool 2s;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

@keyframes zippyTool {
    0% { opacity: 0; top: -20px}
    100% { opacity: 1; top: 40px; }
}

JavaScript

setTimeout(function() {
    $( ".tooltip" ).fadeOut( "slow" );
  }, 10000);