.tooltip-box {
    position: relative;  
    transition: all 0.3s ease-in-out;

  }
  .tooltip {
    visibility: hidden;
    z-index: 100000;
    opacity: .40;  
    width: fit-content;
    padding: 5px 15px 5px 15px;  
    position: absolute;
    border-radius: 9px;
    transform: translateY(9px);
    box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
    font-family: "Caveat", cursive;
    top:-158%; right:94%;
  }
  .tooltip::after {
    content: " ";
    width: 0;
    height: 0;
    opacity: .9;
    border-style: solid;
    border-width: 12px 1.5px 0 11.5px;
    border-color: #333 transparent transparent transparent;
    position: absolute;
    right: -5%;
    top: 56%;
  }
  .tooltip-box:hover .tooltip{
    visibility: visible;
    opacity: 100;
    background: #333;

  }
  .tooltip-box .tooltip::after{
    transform: rotate(-43deg);
  }