/* Tooltip container */
.tooltip {position: relative; display: inline-block;border: 1px dotted black;}

/* Tooltip text */
.tooltip .tooltiptext {
position:absolute;bottom:60px;left:50%;transform: translate(-50%, 0);
z-index: 1;visibility: hidden;text-align: center;
padding: 10px;
background-color: #245f6b;color: #fff;
font-size:0.75em;font-family:arial,helvetica,sans-serif; text-transform:uppercase;letter-spacing:0.01em;
}

.tooltip .tooltiptext:after {
    content: "";
    position: relative;
    bottom: -14px;
	left:-7px;
	left: calc(50% - 5px);
    border-width: 5px 5px 0;
    border-style: solid;
    border-color: #245f6b transparent;
    display: block;
    width: 0;
}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover {border: 1px dotted #245f6b;}
.tooltip:hover .tooltiptext {visibility: visible;}