.tooltip {position: absolute; border-radius: 3px; display: block; padding: 2px 6px;  max-width: 250px; display: none; font-size: 12px;z-index:100;}
.tooltip .arrow {position: absolute;background: url('../images/tooltip.gif') no-repeat;width: 9px;height: 5px; opacity: 0.7}
.tooltip:after {content:'';position: absolute;background: url('../images/tooltip.gif') no-repeat;width: 9px;height: 5px;}
.tooltip.top:after {bottom: -4px; left: calc(50% - 4.5px);background-position:  bottom left;}
.tooltip.bottom:after {top: -4px; left: calc(50% - 4.5px);background-position:  top left;}
.tooltip.show {display: block;}
.tooltip.hide {display: none;}

.tooltip.black {background: #000; color: #fff}