CSS tooltips

Feb 1

Create tooltipsA ToolTip is a descriptive text box that appears when the mouse pointer is held over a tool, button or other object using the technique demonstrated at madaboutstyle.



a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#fff;
    color:#000;
    border-bottom:1px dotted #999;
    cursor: help;
    text-decoration:none
}

a.info:hover{
    z-index:25; background-color:#ff0}
    border-bottom:1px dashed #999;
    text-decoration:none
}

a.info span{display: none}

a.info:hover span{ /*display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #999;
    background-color:#ECECEC; color:#000;
    text-align: center
}
Filed under:
Web design
Tags:
Posted by:
James Griffin
Dated:
February 1, 2004