Created
December 29, 2014 09:52
-
-
Save 5iDS/ec0658e478c2114038f6 to your computer and use it in GitHub Desktop.
CSS3 Tooltips
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
/** | |
* CSS3 Tooltips | |
* Created by Martin Ivanov | |
* http://wemakesites.net | |
*/ | |
/* the tooltip will be applied to any element, containing data-title attribute */ | |
[data-title] | |
{ | |
position: relative; | |
padding: 0; | |
} | |
[data-title]::before, | |
[data-title]::after | |
{ | |
position: absolute; | |
left: 50%; | |
z-index: 5; | |
opacity: 0; | |
visibility: hidden; | |
background: #000; | |
box-shadow: 0 0 2px 1px rgba(0, 0, 0, .8); | |
-moz-transition: opacity 200ms 50ms linear; | |
-webkit-transition: opacity 200ms 50ms linear; | |
-ms-transition: opacity 200ms 50ms linear; | |
-o-transition: opacity 200ms 50ms linear; | |
transition: opacity 200ms 50ms linear; | |
} | |
[data-title]:hover::before, | |
[data-title]:hover::after | |
{ | |
opacity: 1; | |
visibility: visible; | |
} | |
/* the tooltip */ | |
[data-title]::before | |
{ | |
content: attr(data-title); | |
width: 120px; | |
padding: 4px; | |
margin: 30px 0 0 -68px; | |
font: normal 11px/16px Arial, Sans-serif; | |
color: #fff; | |
cursor: default; | |
border-radius: 4px; | |
} | |
/* the pointer */ | |
[data-title]::after | |
{ | |
content: ""; | |
width: 8px; | |
height: 8px; | |
margin: 26px 0 0 -6px; | |
-moz-transform: rotate(45deg); | |
-webkit-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
-o-transform: rotate(45deg); | |
transform: rotate(45deg); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment