/* https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_top */

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted blue;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 60px;
padding: 5px 0px;
background-color: blue;
color: #fff;
text-align: center;
border-RADIUS: 6px;
position: absolute;
z-index: 1;
top: 130%;
left: 50%;
/* 15px is the width of the buton */
margin-left: -30px;
}

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

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