.tooltip { font-family:arial;font-size:12px;position:absolute;z-index:9001;background:rgba(0,0,0,0.85);color:#FFF;padding:5px 10px;max-width:250px;cursor:default;line-height:1.5;border-radius:4px;box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75); }
.tooltip [class*='arrow-'] { position:absolute;-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100% }
.tooltip .arrow-left{margin-top:-12px}
.tooltip .arrow-right{margin-top:-12px}

.arrow-up,.arrow-down,.arrow-left,.arrow-right{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #000 }
.arrow-white{border-bottom-color:#fff}
.arrow-down{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}
.arrow-right{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}
.arrow-left{-webkit-transform:rotateZ(-90deg);transform:rotateZ(-90deg)}

.tooltip.tip-center{text-align:center} /* data-tooltip-align='tip-center' */
.tooltip.tip-right{text-align:right} /*  data-tooltip-align='tip-right' */
.tooltip.tip-warning{color:#000 !important;background:#f89406 !important;} /* data-tooltip-color='tip-warning' */
.tooltip.tip-warning [class*='arrow-']{border-bottom-color:#f89406 !important}
.tooltip.tooltip.tip-fade { opacity:0; transition: opacity 300ms; }
.tooltip.tooltip.tip-fade.in { opacity: 1; }