Forked from Chris Bracco's Pen A Simple CSS Tooltip.
A Pen by Captain Anonymous on CodePen.
Forked from anonymous/A-Simple-CSS-Tooltip.markdown
Created
November 24, 2014 03:44
-
-
Save maxfenton/edab8e790bc04ea1ee1e to your computer and use it in GitHub Desktop.
This file contains 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
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>A Simple CSS Tooltip</title> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>A Simple CSS Tooltip</h1> | |
| </header> | |
| <div class="content"> | |
| <p><a href="#" data-tooltip="I’m the tooltip, yo.">I’m a link with a tooltip.</a></p> | |
| <p><button data-tooltip="I’m the tooltip, yo.">I’m a button with a tooltip</button></p> | |
| </div> | |
| </body> | |
| </html> |
This file contains 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
| /* Some basic styles */ | |
| *, | |
| *:before, | |
| *:after { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0 auto; | |
| max-width: 640px; | |
| width: 90%; | |
| } | |
| body, | |
| button { | |
| font-family: "Helvetica Neue", Arial, sans-serif; | |
| } | |
| button { | |
| font-size: 100%; | |
| } | |
| a:hover { | |
| text-decoration: none; | |
| } | |
| /* Not needed for tooltips to work */ | |
| header, | |
| .content, | |
| .content p { | |
| margin: 4em 0; | |
| text-align: center; | |
| } | |
| /* Add this attribute to the element that needs a tooltip */ | |
| [data-tooltip] { | |
| position: relative; | |
| /* z-index: 2; */ | |
| cursor: pointer; | |
| } | |
| /* Hide the tooltip content by default */ | |
| [data-tooltip]:before, | |
| [data-tooltip]:after { | |
| visibility: hidden; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | |
| filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| /* Position tooltip above the element */ | |
| [data-tooltip]:before { | |
| position: absolute; | |
| z-index: 2; | |
| top: 115%; | |
| left: 50%; | |
| margin-bottom: 5px; | |
| margin-left: -80px; | |
| padding: 7px; | |
| width: 160px; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| border-radius: 3px; | |
| background-color: #000; | |
| background-color: hsla(0, 0%, 20%, 0.9); | |
| color: #fff; | |
| content: attr(data-tooltip); | |
| text-align: center; | |
| font-size: 14px; | |
| line-height: 1.2; | |
| } | |
| /* Triangle hack to make tooltip look like a speech bubble */ | |
| [data-tooltip]:after { | |
| position: absolute; | |
| z-index: 2; | |
| top: 115%; | |
| left: 50%; | |
| margin-left: -5px; | |
| margin-top: -5px; | |
| width: 0; | |
| border-bottom: 5px solid #000; | |
| border-bottom: 5px solid hsla(0, 0%, 20%, 0.9); | |
| border-right: 5px solid transparent; | |
| border-left: 5px solid transparent; | |
| content: " "; | |
| font-size: 0; | |
| line-height: 0; | |
| } | |
| /* Show tooltip content on hover */ | |
| [data-tooltip]:hover:before, | |
| [data-tooltip]:hover:after { | |
| visibility: visible; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; | |
| filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); | |
| opacity: 1; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment