Forked from Chris Bracco's Pen A Simple CSS Tooltip.
A Pen by Captain Anonymous on CodePen.
-
-
Save sgtrusty/8c85dd5620e49d5f5f2bb3fa80aa2623 to your computer and use it in GitHub Desktop.
A Simple 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
| <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 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
| /* 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