Created
November 30, 2016 07:19
-
-
Save Phinome/f136b9045166d3a7683521987d1805b3 to your computer and use it in GitHub Desktop.
css tooltip
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- from: https://jsfiddle.net/greypants/zgCb7/ --> | |
| <style> | |
| .wrapper { | |
| text-transform: uppercase; | |
| background: #ececec; | |
| color: #555; | |
| cursor: help; | |
| font-family: "Gill Sans", Impact, sans-serif; | |
| font-size: 20px; | |
| margin: 0; | |
| padding: 0; | |
| position: relative; | |
| text-align: center; | |
| width: 10px; | |
| -webkit-transform: translateZ(0); /* webkit flicker fix */ | |
| -webkit-font-smoothing: antialiased; /* webkit text rendering fix */ | |
| } | |
| .wrapper .tooltip { | |
| background: #1496bb; | |
| bottom: 100%; | |
| color: #fff; | |
| display: block; | |
| left: -25px; | |
| margin-bottom: 15px; | |
| opacity: 0; | |
| padding: 20px; | |
| pointer-events: none; | |
| position: absolute; | |
| width: 100%; | |
| -webkit-transform: translateY(10px); | |
| -moz-transform: translateY(10px); | |
| -ms-transform: translateY(10px); | |
| -o-transform: translateY(10px); | |
| transform: translateY(10px); | |
| -webkit-transition: all .25s ease-out; | |
| -moz-transition: all .25s ease-out; | |
| -ms-transition: all .25s ease-out; | |
| -o-transition: all .25s ease-out; | |
| transition: all .25s ease-out; | |
| -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | |
| -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | |
| -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | |
| -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | |
| box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); | |
| } | |
| /* This bridges the gap so you can mouse into the tooltip without it disappearing */ | |
| .wrapper .tooltip:before { | |
| bottom: -20px; | |
| content: " "; | |
| display: block; | |
| height: 20px; | |
| left: 0; | |
| position: absolute; | |
| width: 100%; | |
| } | |
| /* CSS Triangles - see Trevor's post */ | |
| .wrapper .tooltip:after { | |
| border-left: solid transparent 10px; | |
| border-right: solid transparent 10px; | |
| border-top: solid #1496bb 10px; | |
| bottom: -10px; | |
| content: " "; | |
| height: 0; | |
| left: 50%; | |
| margin-left: -13px; | |
| position: absolute; | |
| width: 0; | |
| } | |
| .wrapper:hover .tooltip { | |
| opacity: 1; | |
| pointer-events: auto; | |
| -webkit-transform: translateY(0px); | |
| -moz-transform: translateY(0px); | |
| -ms-transform: translateY(0px); | |
| -o-transform: translateY(0px); | |
| transform: translateY(0px); | |
| } | |
| </style> | |
| <div class="wrapper"> | |
| I have a tooltip. | |
| <div class="tooltip">I am a tooltip!</div> | |
| </div> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment