/* ref   : https://blog.hubspot.com/website/html-tooltip  */
/* date  : 12-Nov-22 */

 

.tooltip-text {
/*   visibility: hidden; */
   position: absolute;
   z-index: 2;
   width: 100px;
   color: white;
   font-size: 12px;
   background-color: #1496bb;
   /* background-color: #192733; */
   border-radius: 10px;
   padding: 10px 15px 10px 15px;
}

.tooltip-text::before {
   content: "";
   position: absolute;
   transform: rotate(45deg);
   background-color: #1496bb;
   padding: 5px;
   z-index: 1;
}

/*********************************/

.tooltip-top {
top: -40px;
left: -50%;
}

.tooltip-top::before {
top: 80%;
left: 45%;
}

.tooltip-bottom {
top: 25px;
left: -50%;
}

.tooltip-bottom::before {
top: -5%;
left: 45%;
}

.tooltip-left {
top: -8px;
right: 120%;
}

.tooltip-left::before {
top: 35%;
left: 94%;
}

.tooltip-right {
top: -8px;
left: 120%;
}

.tooltip-right::before {
top: 35%;
left: -2%;
}

/*********************************/

.tooltip-fade {
   opacity: 0;
   transition: opacity 0.5s;
 }
 
 .tooltip-delay {
   opacity: 0;
   transition: opacity 0.2s;
   transition-delay: 1s;
 }
 
 .hover-text:hover .tooltip-fade { opacity: 1; }
 .hover-text:hover .tooltip-delay { opacity: 1; }
 
 
 .hover-text {
   position: relative;
   display: inline-block;
   margin: 40px;
   font-family: Avenir;
   text-align: center;
 }
 
/*
.hover-text:hover .tooltip-text {
   visibility: visible;
}
*/
/*******************************************/