/* Based on https://www.w3schools.com/css/css_tooltip.asp */

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

.tooltip .tooltiptext {
  visibility: hidden;
  white-space: nowrap;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  position: absolute;
  z-index: 1;
}

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

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