.tooltip-wrapper{position:relative;display:inline-block}.tooltip{position:absolute;z-index:1000;padding:0;pointer-events:none;animation:tooltip-fade-in .2s ease-in-out}.tooltip__content{background-color:#333;color:#fff;padding:8px 12px;border-radius:4px;font-size:12px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.15)}.tooltip__arrow{position:absolute;width:0;height:0}.tooltip--bottom .tooltip__arrow,.tooltip--left .tooltip__arrow,.tooltip--right .tooltip__arrow,.tooltip--top .tooltip__arrow,.tooltip__arrow--base{border:6px solid transparent}.tooltip--top{bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px}.tooltip--top .tooltip__arrow{top:100%;left:50%;transform:translateX(-50%);border-top-color:#333}.tooltip--bottom{top:100%;left:50%;transform:translateX(-50%);margin-top:8px}.tooltip--bottom .tooltip__arrow{bottom:100%;left:50%;transform:translateX(-50%);border-bottom-color:#333}.tooltip--left{right:100%;top:50%;transform:translateY(-50%);margin-right:8px}.tooltip--left .tooltip__arrow{left:100%;top:50%;transform:translateY(-50%);border-left-color:#333}.tooltip--right{left:100%;top:50%;transform:translateY(-50%);margin-left:8px}.tooltip--right .tooltip__arrow{right:100%;top:50%;transform:translateY(-50%);border-right-color:#333}@keyframes tooltip-fade-in{0%{opacity:0;transform:translateX(-50%) translateY(-4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}