Skip to content

Instantly share code, notes, and snippets.

Created Jan 9, 2011
What would you like to do?
[data-tooltip], .tooltip {
text-decoration: none!important;
border-bottom: 3px double black;
margin-bottom: -3px;
position: relative;
white-space: nowrap;
@-moz-document url-prefix() {
[data-tooltip], .tooltip, [data-tooltip] a, .tooltip a {
display: inline-block;
line-height: 0.95em;
[data-tooltip] a, .tooltip a {
text-decoration: none;
border-bottom: 1px solid black;
padding-bottom: 4px;
margin-bottom: -5px;
[data-tooltip]::before, .tooltip::before {
content: " ";
line-height: 0;
color: transparent;
font-size: 0;
display: none;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: #333;
position: absolute;
top: 100%;
opacity: 0;
left: 50%;
margin-left: -5px;
font-size: 12px;
[data-tooltip]::after, .tooltip > span {
content: attr(data-tooltip);
display: none;
position: absolute;
left: 50%;
white-space: nowrap;
min-width: 100%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
padding: 0 5px;
min-height: 18px;
line-height: 18px;
z-index: 0;
font-size: 11px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
color: white;
background: rgba(24,24,24,0.8);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(51,51,51,0.8)), to(rgba(0,0,0,0.8)));
background: -moz-linear-gradient(top, rgba(51,51,51,0.8), rgba(0,0,0,0.8));
font-weight: normal;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
margin-top: 10px;
top: 100%;
font-family: sans-serif;
[data-tooltip]:hover::after, .tooltip:hover span {
z-index: 2;
display: block;
[data-tooltip]:hover::before, .tooltip:hover::before {
opacity: 0.8;
display: block;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment