Animated Tooltip with CSS
[View All Snippets]
- <style type="text/css">
- .tooltip-container {
- /* Forces tooltip to be relative to the element, not the page */
- position:relative;
- cursor:help;
- }
- .tooltip {
- display:block;
- position:absolute;
- width:150px;
- padding:5px 15px;
- left:50%;
- bottom:25px;
- margin-left:-95px;
- /* Tooltip Style */
- color:#fff;
- border:2px solid rgba(34,34,34,0.9);
- background:rgba(51,51,51,0.9);
- text-align:center;
- border-radius:3px;
- /* Tooltip Style */
- opacity:0;
- box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);
- -webkit-transition:all 0.2s ease-in-out;
- -moz-transition:all 0.2s ease-in-out;
- -0-transition:all 0.2s ease-in-out;
- -ms-transition:all 0.2s ease-in-out;
- transition:all 0.2s ease-in-out;
- -webkit-transform:scale(0);
- -moz-transform:scale(0);
- -o-transform:scale(0);
- -ms-transform:scale(0);
- transform:scale(0);
- /* Reset tooltip, to not use container styling */
- font-size:14px;
- font-weight:normal;
- font-style:normal;
- }
- .tooltip:before, .tooltip:after{
- content:"";
- position:absolute;
- bottom:-13px;
- left:50%;
- margin-left:-9px;
- width:0;
- height:0;
- border-left:10px solid transparent;
- border-right:10px solid transparent;
- border-top:10px solid rgba(0,0,0,0.1);
- }
- .tooltip:after{
- bottom:-12px;
- margin-left:-10px;
- border-top:10px solid rgba(34,34,34,0.9);
- }
- .tooltip-container:hover .tooltip, a:hover .tooltip {
- /* Makes the Tooltip slightly transparent, Lets the barely see though it */
- opacity:0.9;
- /* Changes the scale from 0 to 1 - This is what animtes our tooltip! */
- -webkit-transform:scale(1);
- -moz-transform:scale(1);
- -o-transform:scale(1);
- -ms-transform:scale(1);
- transform:scale(1);
- }
- /* Custom Classes */
- .tooltip-style1 {
- color:#000;
- border:2px solid #fff;
- background:rgba(246,246,246,0.9);
- font-style:italic;
- }
- .tooltip-style1:after{
- border-top:10px solid #fff;
- }
- </style>
- <i class="tooltip-container"><b>Lorem ipsum dolor sit amet</b><span class="tooltip">Hello! This is a first tooltip!</span></i>
- <em class="tooltip-container"><b>Pellentesque id auctor sem</b><span class="tooltip tooltip-style1">This is a second tooltip!</span></em>
DEMO
Move a mouse coursor over the bold text to see tooltip feature in action.
Lorem ipsum dolor sit ametHello! This is a first tooltip!,
consectetur adipiscing elit. Cras feugiat lectus ut varius faucibus.
Vivamus congue lectus eu diam tincidunt dictum. Nulla semper libero id ullamcorper posuere.
Ut tempus tellus sed dui convallis, vulputate vehicula tellus fringilla. Quisque hendrerit eros
vel mattis hendrerit.
Pellentesque id auctor semThis is a second tooltip!.
Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Aliquam ut dignissim ante, ut ultrices mauris. Etiam
luctus suscipit risus eget mollis. Praesent id elit urna. Ut ligula justo, aliquam in lacus
sollicitudin, tristique faucibus purus. In ac posuere sapien, sit amet pharetra metus. Ut vel
consectetur urna. Curabitur blandit, arcu in aliquet varius, arcu arcu fermentum dui, quis cursus
diam est eu sem. Maecenas massa elit, tristique et vestibulum id, vehicula vel mi. In a convallis dui.