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

}

.tooltip .tooltiptext {
 visibility: hidden;
 width: 150px;
 background-color: #808080;
 color: #fff;
 text-align: center;
 border-radius: 10px;
 padding: 5px 0;
 position: absolute;
 z-index: 1;
 top: -5px;
 right: 110%;
}

.tooltip .tooltiptext::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 100%;
 margin-top: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: transparent transparent transparent #8AC007;
}

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