Skip to content

Instantly share code, notes, and snippets.

@dziudek

dziudek/dabblet.css

Created June 3, 2012 13:55
Show Gist options
  • Save dziudek/2863586 to your computer and use it in GitHub Desktop.
Save dziudek/2863586 to your computer and use it in GitHub Desktop.
Download ZIP
Fast CSS tooltips without any JavaScript and with semantic dfn element use ;)
Raw
dabblet.css
/**
* Fast CSS tooltips without any JavaScript and with semantic dfn element use ;)
*/
a.tooltip {
position: relative;
}
a.tooltip dfn {
position: absolute;
left:-9999px;
width: 200px;
border: 1px solid #eee;
padding: 5px;
top: 10px;
background: #fff;
}
a.tooltip:hover dfn {
left: 50%;
margin-left:-100px;
top: 10px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis. </p>
<p><a href="#" class="tooltip">Description<dfn>Lorem ipsum dolor sit amet, nunciam polunciam ;)</dfn></a>
lorem ipsum dolor</p>
<p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. </p>
<p>Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. </p>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment