.tooltip{
position: relative;
}
.tooltip-box {
position: absolute;
box-shadow: 0px 8px 16px 0px #7090B033;
min-width: 33rem;
padding: 2.4rem;
background: #fff;
z-index: 99;
left: 2.4rem;
transform: translateY(calc(-50% - 8px));
display: none;
}
.tooltip-box.right{
left: auto;
right: 2.4rem;
}
.tooltip:hover .tooltip-box{
display: block;
}
.tooltip-box::before{
position: absolute;
content: "";
width: 0; 
height: 0;
left: -6px;
top: 0;
bottom: 0;
margin: auto;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent; 
border-right: 6px solid #fff; 
box-shadow: 0px 8px 16px 0px #7090B033;
}
.tooltip-box.right:before{
left: auto;
right: -6px;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.tooltip-box p{
font-size: 1.2rem;
line-height: 1.8rem;
}
@media(min-width:1460px) and (max-width:1559px){
.tooltip-box {
min-width: 28rem;
padding: 2rem;
}
}
@media(min-width:1360px) and (max-width:1459px){
.tooltip-box {
min-width: 23rem;
padding: 2rem;
}
}
@media(min-width:1260px) and (max-width:1359px){
.tooltip-box {
min-width: 18rem;
padding: 1.6rem;
}
}
@media(min-width:1200px) and (max-width:1259px){
.tooltip-box {
min-width: 17rem;
padding: 1.6rem;
}
}
@media(min-width:992px) and (max-width:1199px){
.tooltip-box {
min-width: 28rem;
padding: 2rem;
left: 0;
transform: translate(calc(-50% + 7px), calc(-100% - 24px));
}
.tooltip-box::before {
left: 0;
right: 0;
top: auto;
bottom: -9px;
margin: auto;
transform: rotate(-90deg);
}
}
@media(max-width:991px){
.tooltip-box {
min-width: 21rem;
padding: 2rem;
left: 0;
transform: translate(calc(-50% + 7px), calc(-100% - 24px));
}
.tooltip-box::before {
left: 0;
right: 0;
top: auto;
bottom: -9px;
margin: auto;
transform: rotate(-90deg);
}
}