Animated Tooltip with CSS

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.

[View All Snippets]
Show Plain Text »
  1. <style type="text/css">
  2. .tooltip-container {
  3.     /* Forces tooltip to be relative to the element, not the page */
  4.     position:relative; 
  5.     cursor:help;
  6. }
  7.  
  8. .tooltip {
  9.     display:block;
  10.     position:absolute;
  11.     width:150px;
  12.     padding:5px 15px;
  13.     left:50%;
  14.     bottom:25px;
  15.     margin-left:-95px;
  16.     /* Tooltip Style */
  17.     color:#fff;
  18.     border:2px solid rgba(34,34,34,0.9);
  19.     background:rgba(51,51,51,0.9);
  20.     text-align:center;
  21.     border-radius:3px;
  22.     /* Tooltip Style */
  23.     opacity:0;
  24.     box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);
  25.     -webkit-transition:all 0.2s ease-in-out;
  26.     -moz-transition:all 0.2s ease-in-out;
  27.     -0-transition:all 0.2s ease-in-out;
  28.     -ms-transition:all 0.2s ease-in-out;
  29.     transition:all 0.2s ease-in-out;
  30.     -webkit-transform:scale(0);
  31.     -moz-transform:scale(0);
  32.     -o-transform:scale(0);
  33.     -ms-transform:scale(0);
  34.     transform:scale(0);
  35.     /* Reset tooltip, to not use container styling */
  36.     font-size:14px;
  37.     font-weight:normal;
  38.     font-style:normal;
  39. }
  40.  
  41. .tooltip:before, .tooltip:after{
  42.     content:"";
  43.     position:absolute;
  44.     bottom:-13px;
  45.     left:50%;
  46.     margin-left:-9px;
  47.     width:0;
  48.     height:0;
  49.     border-left:10px solid transparent;
  50.     border-right:10px solid transparent;
  51.     border-top:10px solid rgba(0,0,0,0.1);
  52. }
  53. .tooltip:after{
  54.     bottom:-12px;
  55.     margin-left:-10px;
  56.     border-top:10px solid rgba(34,34,34,0.9);
  57. }
  58.  
  59. .tooltip-container:hover .tooltip, a:hover .tooltip {
  60.     /* Makes the Tooltip slightly transparent, Lets the barely see though it */
  61.     opacity:0.9;
  62.     /* Changes the scale from 0 to 1 - This is what animtes our tooltip! */
  63.     -webkit-transform:scale(1);
  64.     -moz-transform:scale(1);
  65.     -o-transform:scale(1);
  66.     -ms-transform:scale(1);
  67.     transform:scale(1);
  68. }
  69.  
  70. /* Custom Classes */
  71. .tooltip-style1 {
  72.     color:#000;
  73.     border:2px solid #fff;
  74.     background:rgba(246,246,246,0.9);
  75.     font-style:italic;
  76. }
  77. .tooltip-style1:after{
  78.     border-top:10px solid #fff;
  79. }
  80. </style>
  81.  
  82. <i class="tooltip-container"><b>Lorem ipsum dolor sit amet</b><span class="tooltip">Hello! This is a first tooltip!</span></i>
  83.  
  84. <em class="tooltip-container"><b>Pellentesque id auctor sem</b><span class="tooltip tooltip-style1">This is a second tooltip!</span></em>


DEMO

Move a mouse coursor over the bold text to see tooltip feature in action.

Lorem ipsum dolor sit ametHello! This is a first tooltip!, consectetur adipiscing elit. Cras feugiat lectus ut varius faucibus. Vivamus congue lectus eu diam tincidunt dictum. Nulla semper libero id ullamcorper posuere. Ut tempus tellus sed dui convallis, vulputate vehicula tellus fringilla. Quisque hendrerit eros vel mattis hendrerit.

Pellentesque id auctor semThis is a second tooltip!. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ut dignissim ante, ut ultrices mauris. Etiam luctus suscipit risus eget mollis. Praesent id elit urna. Ut ligula justo, aliquam in lacus sollicitudin, tristique faucibus purus. In ac posuere sapien, sit amet pharetra metus. Ut vel consectetur urna. Curabitur blandit, arcu in aliquet varius, arcu arcu fermentum dui, quis cursus diam est eu sem. Maecenas massa elit, tristique et vestibulum id, vehicula vel mi. In a convallis dui.

Create Your Free Account
Please remember that this information is essential to use our services correctly.
After creating the account you will be able to download all of our FREE products.
Fields marked with * are mandatory






Please send me information about updates, new products, specials and discounts from ApPHP!
We recommend that your password should be at least 6 characters long and should be different from your username/email. Please use only letters of the English alphabet to enter your name.

Your e-mail address must be valid. We use e-mail for communication purposes (order notifications, etc). Therefore, it is essential to provide a valid e-mail address to be able to use our services correctly.

All your private data is confidential. We will never sell, exchange or market it in any way. Please refer to Privacy Policy.

By clicking "Create Account", you are indicating that you have read and agree to the ApPHP Terms & Conditions.

Quick Registration with: Facebook / Google