Skip to content

Instantly share code, notes, and snippets.

@srobbin
Created April 18, 2013 23:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save srobbin/5417082 to your computer and use it in GitHub Desktop.
Save srobbin/5417082 to your computer and use it in GitHub Desktop.
A simple CSS tooltip
section {
font-family: Helvetica, sans-serif;
width: 960px;
margin: 50px auto 0 auto;
}
.tooltip {
display: none;
position: absolute;
background: black;
color: white;
padding: 5px;
}
a {
position: relative;
}
a:hover .tooltip {
display: block;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tooltip!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="container">
<h1>A simple tooltip example</h1>
<p>
<a href="#">
Hover me, please.
<span class="tooltip">I'm a tooltip!</span>
</a>
</p>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment