.demo{ text-align: center; }
.toolTip{
color: #273c75;
background: none;
font-family: 'Space Grotesk', sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 20px;
text-transform: capitalize;
padding: 0;
position: relative;
transition: all 0.3s ease;
}
.toolTip:hover,
.toolTip:focus{
color: #192a56;
outline: none;
}
.toolTip:before,
.toolTip:after{
content: attr(data-tip);
color: #555;
background: #fff;
font-size: 13px;
font-weight: 500;
line-height: 18px;
width: 155px;
padding: 10px 10px;
border: 3px solid #273c75;
white-space: pre-wrap;
opacity: 0;
z-index: -100;
transition: all 0.5s ease-in-out;
}
.toolTip:after{
content: '';
background: linear-gradient(135deg, transparent 50%, #273c75 50%);
padding: 0;
height: 10px;
width: 10px;
border: none;
box-shadow: none;
}
.toolTip:hover:before,
.toolTip:hover:after{
opacity: 1;
z-index: 100;
}
.toolTip.top:before,
.toolTip.top:after{
transform: translateX(-50%) scale(1.3);
position: absolute;
left: 50%;
bottom: -100%;
}
.toolTip.top:after{
bottom: calc(100% + 11px);
transform: translateX(-50%) rotate(45deg) scale(0);
}
.toolTip.top:hover:before{
transform: translateX(-50%) scale(1);
bottom: calc(100% + 15px);
}
.toolTip.top:hover:after{ transform: translateX(-50%) rotate(45deg) scale(1); }
.toolTip.bottom:before,
.toolTip.bottom:after{
transform: translateX(-50%) scale(1.3);
position: absolute;
left: 50%;
top: -100%;
}
.toolTip.bottom:after{
top: calc(100% + 11px);
transform: translateX(-50%) rotate(-135deg) scale(0);
}
.toolTip.bottom:hover:before{
transform: translateX(-50%) scale(1);
top: calc(100% + 15px);
}
.toolTip.bottom:hover:after{ transform: translateX(-50%) rotate(-135deg) scale(1); }
.toolTip.left:before,
.toolTip.left:after{
transform: translateY(-50%) scale(1.3);
position: absolute;
top: 50%;
right: -100%;
}
.toolTip.left:after{
right: calc(100% + 11px);
transform: translateY(-50%) rotate(-45deg) scale(0);
}
.toolTip.left:hover:before{
transform: translateY(-50%) scale(1);
right: calc(100% + 15px);
}
.toolTip.left:hover:after{ transform: translateY(-50%) rotate(-45deg) scale(1); }
@media only screen and (max-width: 767px){
.toolTip{ margin: 0 0 20px; }
}