.custome-tooltip{background-color:#ffaffc;border-radius:10px;position:relative;text-align:center;font-size:10px}.custome-tooltip::after{background-color:#333;border-radius:10px;color:#fff;display:none;padding:10px 15px;font-size:16px;width:130px;position:absolute;text-align:center;z-index:999}.custome-tooltip::before{background-color:#333;content:' ';display:none;position:absolute;width:15px;height:15px;z-index:999}.custome-tooltip:hover::after{display:block}.custome-tooltip:hover::before{display:block}.custome-tooltip.top::after{content:attr(data-text);top:0;left:50%;transform:translate(-50%,calc(-100% - 10px))}.custome-tooltip.top::before{top:0;left:50%;transform:translate(-50%,calc(-100% - 5px)) rotate(45deg)}.custome-tooltip.bottom::after{content:attr(data-text);bottom:0;left:50%;transform:translate(-50%,calc(100% + 10px))}.custome-tooltip.bottom::before{bottom:0;left:50%;transform:translate(-50%,calc(100% + 5px)) rotate(45deg)}.custome-tooltip.right::after{content:attr(data-text);top:0;right:0;transform:translateX(calc(100% + 10px))}.custome-tooltip.right::before{top:50%;right:0;transform:translate(calc(100% + 5px),-50%) rotate(45deg)}.custome-tooltip.left::after{content:attr(data-text);top:0;left:0;transform:translateX(calc(-100% - 10px))}.custome-tooltip.left::before{top:50%;left:0;transform:translate(calc(-100% - 5px),-50%) rotate(45deg)}