Skip to content

Instantly share code, notes, and snippets.

@wrumsby

wrumsby/dabblet.css

Created February 20, 2012 00:17
Show Gist options
  • Save wrumsby/1866714 to your computer and use it in GitHub Desktop.
Save wrumsby/1866714 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
body {
font-family: sans-serif;
}
p {
margin-top: 4em;
}
a:hover {
text-decoration: none;
}
a.tooltip[title]:hover {
position: relative;
}
a.tooltip[title]:hover:after {
height: 0;
width: 0;
content: '';
border: 8px solid transparent;
border-bottom-color: #333;
position: absolute;
top: 10px;
left: 0;
opacity: 0.8;
}
a.tooltip[title]:hover:before {
position: absolute;
left: -10px;
top: 26px;
text-decoration: none;
background-color: #333;
color: white;
font-weight: bold;
padding: 3px 6px;
border-radius: 5px;
content: attr(title);
min-width: 6em;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
opacity: 0.8;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<p>The quick brown <a href="#" class="tooltip" title="A fox">fox</a>
jumps over the lazy dog. The quick brown
<a href="#" class="tooltip" title="Another fox">fox</a> jumps over the lazy dog.
The quick brown <a href="#" class="tooltip" title="Fox 3">foxy fox</a>
jumps over the lazy dog.</p>
Raw
settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment