Here's the CSS
/** css tooltips */
a.tip {
border-bottom: 1px dashed;
text-decoration: none;
}
a.tip:hover {
position: relative;
cursor: help;
}
a.tip span {
display: none;
}
a.tip:hover span {
display: block;
position: absolute; top: 10px; left: 0;
/* formatting only styles */
padding: 5px; margin: 10px; z-index: 100;
color:#000;
border: 1px dotted #c0c0c0;
text-decoration: none;
padding-right: 20px;
background: #f0f0f0 url(images/status-info.png) 100% 5% no-repeat;
filter:alpha(opacity=90);
-moz-opacity:.90;
opacity:.90;
/* background-color:#f0f0f0; */
width: 325px;
/* end formatting */
}
a.tip:hover span li {
list-style:none;
}
a.tip:hover table th
{
font-weight:bold;
text-align:right;
vertical-align:top;
}
And here is how you implement it in the HTML code. Any text (or HTML markup) between the tag appears in the pop-up box. This isn't actually a pop-up window, so it shouldn't be blocked by pop-up blockers.
My Displayed TextMy hidden tooltip text