Skip to content

Instantly share code, notes, and snippets.

@jamiew
Created August 25, 2008 06:40
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 jamiew/7047 to your computer and use it in GitHub Desktop.
Save jamiew/7047 to your computer and use it in GitHub Desktop.
modern browsers don't need javascript for tooltips. js for legacy is easy enough
/**************************
BEGIN TOOL TIP CSS
**************************/
a.tip {position: relative;}
a span.tip-content,
a span.tip-bottom {
position: absolute;
width: 273px;
padding: 20px 50px 5px 20px;
bottom: 48px;
left: -50px;
background: transparent url(images/tool-tips-content.png) no-repeat 0 0;
color: #6a645c;
}
a span.tip-bottom {
display: block;
padding: 0 20px;
bottom: 16px;
height: 33px;
background: transparent url(images/tool-tips-bottom.png) 0 0 no-repeat;
}
.tip-content strong {
display: block;
border-bottom: 1px dotted #c1c1c1;
font: bold 12px Georgia;
padding-bottom: 3px;
margin-bottom: 5px;
}
.tip-content em {
text-decoration: underline;
font-style: normal;
color: #5683ae;
padding-right: 14px;
background: transparent url(images/arrow.png) no-repeat right 2px;
}
.tip-content img {
float: left;
margin-right: 5px;
}
/*************************************
ADDITIONAL CSS FOR NON JAVASCRIPT USE
**************************************/
a span.tip-content,
a span.tip-bottom {visibility: hidden;}
a:hover span.tip-content,
a:hover span.tip-bottom {visibility: visible;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment