Advanced Search

Animated Tooltip with CSS

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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>

URL: http://www.apphp.com/index.php?snippet=css-pure-ccs3-animated-tooltip

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.