Posted By

COBOLdinosaur on 11/06/14

Tagged

Versions (?)

Last Edited at 11/06/14 07:47am

Statistics

Viewed 440 times

Favorited by 0 user(s)

Related snippets

Animated Tooltips With Very Little Coding

/ Published in: CSS

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.

Highlighted TextExpand

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;
                  }

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

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.