div > .tooltip, li > .tooltip, a > .tooltip, span > .tooltip { opacity: 0; margin-top: -10px; visibility: hidden; margin-left: -65px; -webkit-transition-property:opacity, margin-top, visibility, margin-left; -webkit-transition-duration:0.5s, 0.3s, 0.5s, 0.3s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -moz-transition-property:opacity, margin-top, visibility, margin-left; -moz-transition-duration:0.5s, 0.3s, 0.5s, 0.3s; -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -o-transition-property:opacity, margin-top, visibility, margin-left; -o-transition-duration:0.5s, 0.3s, 0.5s, 0.3s; -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; transition-property:opacity, margin-top, visibility, margin-left; transition-duration:0.5s, 0.3s, 0.5s, 0.3s; transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in; } div:hover > .tooltip, li:hover > .tooltip, a:hover > .tooltip, span:hover > .tooltip, a .tooltip:hover, span .tooltip:hover, li .tooltip:hover, div .tooltip:hover { opacity: 1; visibility: visible; overflow: visible; margin-top: 30px; display: inline; margin-left: -40px; -webkit-transition-property:opacity, margin-top, visibility, margin-left; -webkit-transition-duration:0.5s, 0.3s, 0.5s, 0.3s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -moz-transition-property:opacity, margin-top, visibility, margin-left; -moz-transition-duration:0.5s, 0.3s, 0.5s, 0.3s; -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -o-transition-property:opacity, margin-top, margin-left; -o-transition-duration:0.5s, 0.3s, 0.3s; -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out; transition-property:opacity, margin-top, visibility, margin-left; transition-duration:0.5s, 0.3s, 0.5s; transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; } .tooltip { background: #FFFBCF; background: -moz-linear-gradient(top, #FFFBCF 0%, #FFFCDF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFBCF), color-stop(100%,#FFFCDF)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFBCF', endColorstr='#FFFCDF',GradientType=0 ); border: 1px solid #EFE795; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; padding: 10px; margin-left: -40px; position: absolute; font-family: Arial; font-size: 12px; text-decoration: none; font-style: normal; color: #777; text-shadow: 1px 1px 0 rgba(255,255,255,0.75); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 #fff; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 #fff; -o-box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 #fff; z-index: 10; } .tooltip span { /* Triangle */ background: #FFFBCF; border: 0; border-top: 1px solid #EFE795; border-right: 1px solid #EFE795; width: 10px; height: 10px; margin-left: 15px; margin-top: -16px; display: block; position: absolute; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: inset -1px 1px 0 #fff; -moz-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; display /*\**/: none\9; *display: none !important; *display: none; }