Skip to content

Instantly share code, notes, and snippets.

@jeffreytierney
Created June 22, 2011 21:00
Show Gist options
  • Save jeffreytierney/1041180 to your computer and use it in GitHub Desktop.
Save jeffreytierney/1041180 to your computer and use it in GitHub Desktop.
single element tooltips and talk bubbles with pure css
.tooltip {
position: absolute;
text-align: center;
display: inline-block;
background: #FFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
border: 2px solid #5DADF5;
padding: 10px;
margin-top: -10px;
}
.tooltip:after {
content: ".";
display: block;
position: absolute;
bottom:-10px;
left: 50%;
margin-left: -7px;
height: 0px;
width: 0px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #FFF;
font-size: 0px;
text-indent: -999px;
}
.tooltip:before {
content: ".";
display: block;
position: absolute;
bottom:-13px;
left: 50%;
margin-left: -9px;
height: 0px;
width: 0px;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-top:12px solid #5DADF5;
font-size: 0px;
text-indent: -999px;
}
.talky {
position: absolute;
display: inline-block;
background: #FFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
border: 2px solid #5DADF5;
padding: 10px;
margin-top: -10px;
}
.talky:after {
content: ".";
display: block;
position: absolute;
bottom:-15px;
left: 20px;
height: 0px;
width: 0px;
border-right:15px solid transparent;
border-top:15px solid #FFF;
font-size: 0px;
text-indent: -999px;
}
.talky:before {
content: ".";
display: block;
position: absolute;
bottom:-20px;
left: 18px;
height: 0px;
width: 0px;
border-right:20px solid transparent;
border-top:20px solid #5DADF5;
font-size: 0px;
text-indent: -999px;
}
@jeffreytierney
Copy link
Author

@jeffreytierney
Copy link
Author

got the css triangle trick from -> http://davidwalsh.name/css-triangles

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment