.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: black;
    width: auto;
    color: #fff;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    font-size: 0.8em;
        
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 0.25s;
}

.tooltip .bottom {
  min-width: 150px;
  top: 100%;
    left: 50%; 
    transform: translateX(-50%);
}


.tooltip .top 
{
    bottom: 100%;
    left: 50%;
    min-width: 80px;
    margin-left: -40px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltip .left
{
    top: 0px;
    right: 105%; 
}
.tooltip .right
{
   top: 0px;
   left: 105%; 
   min-width: 100px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}