@CHARSET "UTF-8";

.tooltip { position: relative; cursor:pointer; }
.tooltip:before,
.tooltip:after { display: block; opacity: 0; pointer-events: none; position: absolute; }
.tooltip:after { border-right: 6px solid transparent;border-bottom: 6px solid rgba(0,0,0,.75); border-left: 6px solid transparent;content: '';height: 0;top: 20px;left: 20px;width: 0;}
.tooltip:before { background: rgba(0,0,0,.75);border-radius: 2px;color: #fff;content: attr(data-title);font-size: 14px;padding: 6px 10px;top: 26px;white-space: nowrap;}

.tooltip.fade:after,
.tooltip.fade:before { transform: translate3d(0,-10px,0);transition: all .15s ease-in-out;}
.tooltip.fade:hover:after,
.tooltip.fade:hover:before { opacity: 1;transform: translate3d(0,0,0);}

.tooltip.expand:before { transform: scale3d(.2,.2,1); transition: all .2s ease-in-out;}
.tooltip.expand:after { transform: translate3d(0,6px,0);transition: all .1s ease-in-out;}
.tooltip.expand:hover:before,
.tooltip.expand:hover:after { opacity: 1; transform: scale3d(1,1,1);}
.tooltip.expand:hover:after { transition: all .2s .1s ease-in-out;}

.tooltip.swing:before,
.tooltip.swing:after { transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);transform-origin: 0 0;transition: transform .15s ease-in-out, opacity .2s;}
.tooltip.swing:after { transform: translate3d(0,60px,0);transition: transform .15s ease-in-out, opacity .2s;}
.tooltip.swing:hover:before,
.tooltip.swing:hover:after {opacity: 1;transform: translate3d(0,0,0) rotate3d(1,1,1,0deg);}