DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Chara has posted 50 posts at DZone. View Full User Profile

Animated Tooltip with CSS

01.28.2014
| 2073 views |
  • submit to reddit
<style type="text/css">
.tooltip-container {
    /* Forces tooltip to be relative to the element, not the page */
    position:relative;  
    cursor:help;
}
 
.tooltip {
    display:block;
    position:absolute;
    width:150px;
    padding:5px 15px;
    left:50%;
    bottom:25px;
    margin-left:-95px;
    /* Tooltip Style */
    color:#fff;
    border:2px solid rgba(34,34,34,0.9);
    background:rgba(51,51,51,0.9);
    text-align:center;
    border-radius:3px;
    /* Tooltip Style */
    opacity:0;
    box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -0-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -o-transform:scale(0);
    -ms-transform:scale(0);
    transform:scale(0);
    /* Reset tooltip, to not use container styling */
    font-size:14px;
    font-weight:normal;
    font-style:normal;
}
 
.tooltip:before, .tooltip:after{
    content:"";
    position:absolute;
    bottom:-13px;
    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);
}
.tooltip:after{
    bottom:-12px;
    margin-left:-10px;
    border-top:10px solid rgba(34,34,34,0.9);
}
 
.tooltip-container:hover .tooltip, a:hover .tooltip {
    /* Makes the Tooltip slightly transparent, Lets the barely see though it */
    opacity:0.9;
    /* Changes the scale from 0 to 1 - This is what animtes our tooltip! */
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
}
 
/* Custom Classes */
.tooltip-style1 {
    color:#000;
    border:2px solid #fff;
    background:rgba(246,246,246,0.9);
    font-style:italic;
}
.tooltip-style1:after{
    border-top:10px solid #fff;
}
</style>
 
<i class="tooltip-container"><b>Lorem ipsum dolor sit amet</b><span class="tooltip">Hello! This is a first tooltip!</span></i>
 
<em class="tooltip-container"><b>Pellentesque id auctor sem</b><span class="tooltip tooltip-style1">This is a second tooltip!</span></em>

This example shows you how to create custom tooltips, using just a pure CSS. In this examples we use "transform" feature of the CSS3 and some other tricks. Also you may find additional tooltip class provided, to show you the way you may customize this code.