Skip to content

Instantly share code, notes, and snippets.

@jabranr

jabranr/index.html

Created August 8, 2013 08:00
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 jabranr/6182554 to your computer and use it in GitHub Desktop.
Save jabranr/6182554 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Jabran Rafique. CSS Tooltip - Tooltip in pure CSS
Raw
index.html
<!doctype html>
<html>
<head></head>
<body>
<div class="tooltip">
<div class="tikon"></div>
<div class="tiptext">This is the longest ever tooltip you might have seen in whole world wide web.</div>
</div>
</body>
</html>
Raw
style.css
body {
background-color: #f00;
}
* {
box-sizing: border-box;
}
div.tikon {
/* some styling */
}
div.tikon:before,
div.tikon:after {
content: ' ';
height: 0;
width: 0;
position:absolute;
border:7px solid transparent;
z-index: 2;
}
div.tikon:before {
border-right-color: #fc3;
left:-12px;
top: 6.5px;
}
div.tooltip {
box-shadow: 2px 2px 5px rgba(0,0,0,0.35);
font-family: Arial;
font-size: 12px;
color: #c30;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(255,255,255,0.35);
border-radius: 15px;
margin: 50px;
display: inline-block;
padding: 6px 10px;
background: -webkit-linear-gradient(left, #fc3, #fc3);
position: relative;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment