CSS tooltips

by sanford

HTML

<div class="tippy" tip-title="wacka&nbsp;wacka">01</div>
<div class="tippy" tip-title="dr&nbsp;and&nbsp;mr
                 11asdfdfd">02</div>
<div id="d03">03</div>
<!--[if lt IE 9]>
<style type="text/css">
.tippy:after { 
visibility:hidden;
background-position: -214px 0px;
}
.tippy:hover:after { visibility:visible; }
</style>
<![endif]-->

CSS

body {padding: 50px;}
#d03 {
    background-color: silver;
    position: relative;
    ZZz-index: 2000;
    margin-top: 50px;
}

.tippy {
    margin-top: 50px;
    height: 36px;
    width: 36px;
    background-color: yellowgreen;
    border: 0px solid indigo;
    display: block;
    position:relative;
    cursor:pointer;
    z-index: 999;
}

.tippy:after {
    font-family: Verdana; font-size: 11px;
    background-image: url(http://www.imprimia.com/css_tips_arrow.gif?13);
    background-repeat: no-repeat;
    background-clip: padding-box;
    height: auto;
    width: 1px;
    opacity:0;
    content: attr(tip-title);
    white-space: pre-line;
    border: 0px dotted darkgray;
    color: beige;
    display: block;
    position: absolute;
    left: 1px;
    top: 100%;
    ZZmargin-top: -5px;
    z-index: 1000;
    padding: 10px 7px 6px 7px;
    border-radius: 7px;
}
.tippy:hover:after {
    -moz-transition-property: opacity,width;
    -moz-transition-duration: 600ms,200ms;
    -webkit-transition-property: opacity,width; /* some wk no worky on p-e */
    -webkit-transition-duration: 600ms,200ms;
    transition-property: opacity,width;
    transition-duration: 600ms,200ms;
    opacity: 1;
    width: 200px;
}