.my-calendar table { border-collapse: collapse; width: 100%; }
.my-calendar th, .my-calendar td { border: 1px solid #ddd; padding: 10px; text-align: center; }
.my-calendar .highlight { background: #ffeb3b; cursor: pointer; }
.my-calendar .calendar-nav { margin-bottom: 10px; text-align: center; }
.my-calendar .highlight { position: relative; cursor: pointer; }
.my-calendar td.highlight {
  position: relative;
  background: #ffef9f; /* highlight color */
  cursor: pointer;
}

.my-calendar td.highlight {
  position: relative;
  background: #ffef9f; /* highlight color */
  cursor: pointer;
}

/* Tooltip box */
.my-calendar td.highlight .tooltip {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  
  position: absolute;
  bottom: 125%; /* show above the number */
  left: 50%;
  transform: translateX(-50%);
  
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 999;
}

/* Arrow under tooltip */
.my-calendar td.highlight .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Show tooltip on hover */
.my-calendar td.highlight:hover .tooltip {
  visibility: visible;
  opacity: 1;
}