CSS based Popup Tooltip Box

May 11, 2007 by hejian

This is a clever CSS based popup help box.

HTML Code

<div class="ihelp">
<a href="javascript:void(0)" onclick="return false;">
<span>Help text ......</span>
</a>
</div>

CSS Code

.ihelp {
float: right;
}
.ihelp a {
display: block;
width: 16px;
height: 15px;
text-decoration: none;
background: url(images/info_inco.gif) top left no-repeat;
}
.ihelp a:hover {
text-decoration: none;
cursor: help;
}
.ihelp a span {
display: none;
}
.ihelp a:hover span {
display: inline;
position: absolute;
border: 1px solid #ccc;
width: 150px;
}

Leave a Reply

You must be logged in to post a comment.

Wordpress template made by HeJian