Created
December 16, 2011 16:58
-
-
Save BoringCode/1486884 to your computer and use it in GitHub Desktop.
Untitled
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
/** | |
* Just a fun little tooltip, created from scratch. | |
*/ | |
body { | |
background-color: #999999; | |
} | |
a { | |
margin-left: 20%; | |
margin-top: 20%; | |
display:block; | |
color: white; | |
text-shadow: 0 -1px 1px black; | |
font-size: 30px; | |
position: relative; | |
width: auto; | |
float: left; | |
clear: left; | |
text-align: center; | |
font-family: "Arial", sans-serif; | |
} | |
a[title]:before { | |
position: absolute; | |
top: 0; | |
transition: all 400ms ease-in-out; | |
border: white solid 2px; | |
background-color: slategray; | |
color: white; | |
font-size: 16px; | |
content: attr(title); | |
opacity: 0; | |
border-radius: 4px; | |
right: 0; | |
padding: 2%; | |
padding-top: 4px; | |
padding-bottom: 4px; | |
width: 96%; | |
box-shadow: 0 1px 2px black; | |
} | |
a[title]:after { | |
width: 0; | |
height: 0; | |
border-top: 6px solid transparent; | |
border-bottom: 6px solid transparent; | |
border-right: 8px solid white; | |
content: ""; | |
opacity: 0; | |
position: absolute; | |
left: 0; | |
transition: all 400ms ease-in-out; | |
top: 30%; | |
} | |
a[title]:hover:before { | |
right: -120%; | |
opacity: 1; | |
} | |
a[title]:hover:after { | |
opacity: 1; | |
left: 105%; | |
} | |
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
<!-- Create a link with attitude (actually just with a title) --> | |
<a href="#" title="Hola">Hello</a> | |
<a href="#">I haz no tooltip</a> |
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
{"page":"html","view":"split-vertical"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment