/*Tooltip container*/
.tooltip {
  z-index:99;
  position:relative;
  display:inline-block;
}

/*Tooltip text*/
.tooltip .tooltiptext {
  width:90%;
  color:#fff;
  font-size:14px;
  text-align:left;
  padding:5px 8px;
  visibility:hidden;
  border:solid 2px var(--accent);
  background-color:#000;

  /*Position the tooltip text*/
  z-index:1;
  left:-1px;
  bottom:103%;
  position:absolute;
}

/*Tooltip arrow*/
.tooltip .tooltiptext::after {
  top:100%;
  left:10%;
  content:"";
  margin-left:-5px;
  border-width:5px;
  position:absolute;
  border-style:solid;
  border-color:var(--accent) transparent transparent transparent;
}

/*Show the tooltip text when you mouse over the tooltip container*/
.tooltip:hover .tooltiptext {
  opacity:1;
  visibility:visible;
}