.tooltip-wrapper{display:inline-block;position:relative}.tooltip-tip{color:#fff;z-index:100;white-space:nowrap;background:#000;border-color:#000;padding:6px;font-family:sans-serif;font-size:14px;line-height:1;position:absolute;left:50%;transform:translate(-50%)}.tooltip-tip:before{content:" ";pointer-events:none;border:6px solid #0000;width:0;height:0;margin-left:-6px;position:absolute;left:50%}.tooltip-tip.top{top:-10px;transform:translate(-50%)translateY(-100%)}.tooltip-tip.top:before{border-top-color:inherit;top:100%}.tooltip-tip.right{top:50%;left:calc(100% + 10px);transform:translate(0)translateY(-50%)}.tooltip-tip.right:before{border-right-color:inherit;top:50%;left:-6px;transform:translate(0)translateY(-50%)}.tooltip-tip.bottom{bottom:-10px;transform:translate(-50%)translateY(100%)}.tooltip-tip.bottom:before{border-bottom-color:inherit;bottom:100%}.tooltip-tip.left{top:50%;left:auto;right:calc(100% + 10px);transform:translate(0)translateY(-50%)}.tooltip-tip.left:before{border-left-color:inherit;top:50%;left:auto;right:-12px;transform:translate(0)translateY(-50%)}.tooltip-tip.bottom-left{bottom:-10px;left:auto;right:calc(100% - 20px);transform:translate(15%)translateY(100%)}.tooltip-tip.bottom-left:before{border-bottom-color:inherit;bottom:100%;left:auto;right:12px;transform:translate(-10%)translateY(0)}.tooltip-tip.top-right{top:-10px;left:calc(100% + 20px);transform:translate(-50%)translateY(-100%)}.tooltip-tip.top-right:before{border-top-color:inherit;top:100%;left:12px;transform:translate(-10%)translateY(0)}