a.tooltips{position:relative;display:inline;}a.tooltips span{position:absolute;width:400%;color:#000;background:#eee;border:2px solid #6D6D6D;height:auto;text-align:center;visibility:hidden;border-radius:10px;}a.tooltips span:before{content:'';position:absolute;top:100%;left:50%;margin-left:-12px;width:0;height:0;border-top:12px solid #6D6D6D;border-right:12px solid transparent;border-left:12px solid transparent;}a.tooltips span:after{content:'';position:absolute;top:100%;left:50%;margin-left:-8px;width:0;height:0;border-top:8px solid #ffffff;border-right:8px solid transparent;border-left:8px solid transparent;}a:hover.tooltips span{visibility:visible;opacity:1;bottom:30px;left:50%;margin-left:-76px;z-index:999;}#tooltip{text-align:center;color:#fff;background:#555;position:absolute;z-index:100;padding:8px;border:1px solid #555;border-radius:5px;}#tooltip:after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #555;content:'';position:absolute;left:50%;bottom:-10px;margin-left:-10px;}#tooltip.top:after{border-top-color:transparent;border-bottom:10px solid #555;top:-20px;bottom:auto;}#tooltip.left:after{left:10px;margin:0;}#tooltip.right:after{right:10px;left:auto;margin:0;}