Advanced Search

Animated Tooltips With Very Little Coding

/ Published in: CSS
Save to your folder(s)
Using a sibling relationship in CSS allows all kinds of tooltips effects without scripting or a lot of coding. There are a bunch of different effects on the page and the possibilities are limited only by imagination.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. The HTML:
  2. <div class="tipWrapper">
  3. <span class="tipbox spanlink">In the horizontal</span>
  4. <div class="tiphor"> You can get some wild effects by
  5.  playing with the borders and shadows.</div></div>
  6.  
  7. <div id="vslide" class="tipWrapper"><span id="tboxv" class="tipbox spanlink">or in the vertical</span>
  8. <div class="tipvert">This  tooltip can go up or down to fit into any design.</div></div>
  9.  
  10. CSS for horizontal:
  11.  
  12. .tiphor {
  13.                     position:absolute;
  14.                     visibility:hidden;
  15.                     overflow:hidden;
  16.                     z-index:0;
  17.                     top:0px;
  18.                     left:0px;
  19.                     width:4px;
  20.                     height:4.5em;
  21.                     background-color:white;                                       
  22.                 } 
  23. .tipbox:hover     {
  24.                                 visibility:visible;
  25.                                 width:150px;
  26.                                 height:4em;
  27.                                 overflow:hidden;
  28.                             } 
  29. .spanlink:hover~.tiphor {
  30.                                         left:150px;
  31.                                         transition:left 2s;
  32.                                         width:160px;
  33.                                         visibility:visible;
  34.                               }
  35.  
  36. CSS for vertical:
  37.  
  38. #tboxv  {
  39.                 width:160px;
  40.             }
  41. .tipvert {
  42.                     position:absolute;
  43.                     visibility:hidden;
  44.                     overflow:hidden;
  45.                     z-index:0;
  46.                     top:0px;
  47.                     left:0px;
  48.                     width:4px;
  49.                     height:4.5em;
  50.                     background-color:white;                                       
  51.                 } 
  52. .spanlink:hover~.tipvert {
  53.                                         top:-5em;
  54.                                         transition:top 2s;
  55.                                         width:160px;
  56.                                         visibility:visible;
  57.                               }
  58. #hereseven  {
  59.                     margin-top:8em;
  60.                   }

URL: http://coboldinosaur.com/pages/animated-tooltips.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.