Advanced Search

Return to Snippet

Revision: 67955
at November 6, 2014 07:47 by COBOLdinosaur
Initial Code 
The HTML:
<div class="tipWrapper">
<span class="tipbox spanlink">In the horizontal</span>
<div class="tiphor"> You can get some wild effects by
 playing with the borders and shadows.</div></div>
 
<div id="vslide" class="tipWrapper"><span id="tboxv" class="tipbox spanlink">or in the vertical</span>
<div class="tipvert">This  tooltip can go up or down to fit into any design.</div></div>

CSS for horizontal:

.tiphor {
                    position:absolute;
                    visibility:hidden;
                    overflow:hidden;
                    z-index:0;
                    top:0px;
                    left:0px;
                    width:4px;
                    height:4.5em;
                    background-color:white;                                       
                } 
.tipbox:hover     {
                                visibility:visible;
                                width:150px;
                                height:4em;
                                overflow:hidden;
                            } 
.spanlink:hover~.tiphor {
                                        left:150px;
                                        transition:left 2s;
                                        width:160px;
                                        visibility:visible;
                              }
 
CSS for vertical:

#tboxv  {
                width:160px;
            }
.tipvert {
                    position:absolute;
                    visibility:hidden;
                    overflow:hidden;
                    z-index:0;
                    top:0px;
                    left:0px;
                    width:4px;
                    height:4.5em;
                    background-color:white;                                       
                } 
.spanlink:hover~.tipvert {
                                        top:-5em;
                                        transition:top 2s;
                                        width:160px;
                                        visibility:visible;
                              }
#hereseven  {
                    margin-top:8em;
                  }
Initial URL 
http://coboldinosaur.com/pages/animated-tooltips.html
Initial Description 
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.
Initial Title 
Animated Tooltips With Very Little Coding
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS