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.

    position:relative; /*this is the key*/
    z-index:24; background-color:#fff;
    border-bottom:1px dotted #999;
    cursor: help;

    z-index:25; background-color:#ff0}
    border-bottom:1px dashed #999;

a.info span{display: none}

a.info:hover span{ /*display just on :hover state*/
    top:2em; left:2em; width:15em;
    border:1px solid #999;
    background-color:#ECECEC; color:#000;
    text-align: center

Filed under:
Web design
Posted by:
James Griffin
February 1, 2004