tip.min.css

.cube-tip{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;z-index:10;position:absolute;padding:10px 38px 10px 16px;max-height:60px;font-size:12px;color:#fff;background:rgba(74,76,91,.8);border-radius:2px;-webkit-transition:opacity .2s;transition:opacity .2s}.cube-tip[data-dir=bottom] .cube-tip-angle,.cube-tip[data-dir=top] .cube-tip-angle{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.cube-tip[data-dir=top] .cube-tip-angle{top:0}.cube-tip[data-dir=top] .cube-tip-angle:before{margin-top:-6px;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.cube-tip[data-dir=bottom] .cube-tip-angle{bottom:0}.cube-tip[data-dir=bottom] .cube-tip-angle:before{margin-bottom:-6px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.cube-tip[data-dir=left] .cube-tip-angle,.cube-tip[data-dir=right] .cube-tip-angle{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.cube-tip[data-dir=left] .cube-tip-angle{left:0}.cube-tip[data-dir=left] .cube-tip-angle:before{margin-left:-9px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.cube-tip[data-dir=right] .cube-tip-angle{right:0}.cube-tip[data-dir=right] .cube-tip-angle:before{margin-right:-9px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.cube-tip-angle{position:absolute}.cube-tip-angle:before{content:"";display:block;border-width:0 6px 6px;border-style:solid;border-color:transparent transparent rgba(74,76,91,.8)}.cube-tip-close{position:absolute;right:14px;top:12px;width:12px;height:12px;padding:0;color:inherit;outline:none;border:none;background:none;-webkit-transform:scale(1.3);transform:scale(1.3)}.cube-tip-content{min-height:18px;line-height:18px;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-basis:1e-9px;-ms-flex-preferred-size:1e-9px;flex-basis:1e-9px;width:1%;overflow:hidden}.cube-tip-zoom-enter-active{-webkit-animation:tip-in .4s;animation:tip-in .4s}.cube-tip-zoom-leave-active{-webkit-animation:tip-out .2s;animation:tip-out .2s}@-webkit-keyframes tip-in{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes tip-in{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes tip-out{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}to{-webkit-transform:scale(0);transform:scale(0);opacity:0}}@keyframes tip-out{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}to{-webkit-transform:scale(0);transform:scale(0);opacity:0}}