How to implement the pop-up effect of cue text in CSS3

The text of the pop-up effect I believe that we have done, but in the CSS3, this effect can not require additional JS code to manipulate, we will give you today to achieve a non-JS hint text of the popup window effect.

CSS Code

[Data-tips]         {position:relative;         Text-decoration:none;}             [Data-tips]:after, [Data-tips]:before {position:absolute;                   z-index:100;         opacity:0;                            } [Data-tips]:after {content:attr (data-tips);                            height:25px;                            line-height:25px;                            Padding:0 10px;                            font-size:12px;                            Text-align:center;                            Color: #fff;                            Background: #222;                            border-radius:5px;                            text-shadow:0 0 5px #000;                            -moz-box-shadow:0 0 5px Rgba (0,0,0,0.3);                            -webkit-box-shadow:0 0 5px Rgba (0,0,0,0.3);                            box-shadow:0 0 5px Rgba (0,0,0,0.3);                     White-space:nowrap;       -moz-box-sizing:border-box;                            -webkit-box-sizing:border-box;                   Box-sizing:border-box;                            } [Data-tips]:before {content: "];                            width:0;                            height:0;                            border-width:6px;                   Border-style:solid;                                     } [Data-tips]:hover:after, [Data-tips]:hover:before {                            Opacity:1; }/* Top tips */[data-tips].top-tip:after,[data-tips].top-tip:before {-webkit-transition:bottom 0.25s ease-in-out, OPA    City 0.25s Ease-in-out;    -moz-transition:bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;         Transition:bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;         bottom:90%;         Left: -9999px;         margin-bottom:12px;} [data-tips].top-Tip:before {border-color: #222 transparent transparent transparent;         margin-bottom:0;                   } [Data-tips].top-tip:hover:after, [Data-tips].top-tip:hover:before {bottom:100%;         left:0;         } [Data-tips].top-tip:hover:before {left:15px; }/* Bottom tip */[data-tips].bottom-tip:after,[data-tips].bottom-tip:before {-webkit-transition:top 0.25s Ease-in-ou    T, opacity 0.25s ease-in-out;    -moz-transition:top 0.25s ease-in-out, opacity 0.25s ease-in-out;         Transition:top 0.25s ease-in-out, opacity 0.25s ease-in-out;         top:90%;         Left: -9999px;         margin-top:12px;}                   [Data-tips].bottom-tip:before {border-color:transparent transparent #222 transparent;         margin-top:0;    } [Data-tips].bottom-tip:hover:after, [Data-tips].bottom-tip:hover:before {top:100%;               left:0;         } [Data-tips].bottom-tip:hover:before {left:15px;  }/* Right tip */[data-tips].right-tip:after,[data-tips].right-tip:before {-webkit-transition:left 0.25s ease-in-out,    Opacity 0.25s ease-in-out;    -moz-transition:left 0.25s ease-in-out, opacity 0.25s ease-in-out;         Transition:left 0.25s ease-in-out, opacity 0.25s ease-in-out;         Top: -9999px;         left:96%;         margin-left:12px;}                   [Data-tips].right-tip:before {border-color:transparent #222 transparent transparent;         margin-left:0;                   } [Data-tips].right-tip:hover:after, [Data-tips].right-tip:hover:before {left:100%;         top:0;         } [Data-tips].right-tip:hover:before {top:7px; }/* left tip */[data-tips].left-tip:after,[data-tips].left-tip:before {-webkit-transition:right 0.25s ease-in-out, op Acity 0.25s EAse-in-out;    -moz-transition:right 0.25s ease-in-out, opacity 0.25s ease-in-out;         Transition:right 0.25s ease-in-out, opacity 0.25s ease-in-out;         Top: -9999px;         right:96%;         margin-right:12px;}                   [Data-tips].left-tip:before {border-color:transparent transparent transparent #222;         margin-right:0;                   } [Data-tips].left-tip:hover:after, [Data-tips].left-tip:hover:before {right:100%;         top:0;         } [Data-tips].left-tip:hover:before {top:7px; }

HTML code

<a href= "http://bavotasan.com" data-tips= "Go to Bavotasan.com" >bavotasan.com</a>

This piece of code is pure CSS and HTML does not contain any JS, interested friends can do their own operation, more exciting please pay attention to the PHP Chinese network other related articles!

Related reading:

How CSS encoding is converted

CSS3 Click to display the ripple effect

How to use canvas to achieve small ball and mouse interaction