.tooltip {
  position: absolute; /* Relative to parent with relative position */

  --tt-width: 10rem;
  --tt-height: calc(2 * 1rem + 4 * var(--small-margin));

  width: var(--tt-width);
  height: var(--tt-height);
  background-color: #212121;
  color: white;
  padding: var(--small-margin) calc(2 * var(--small-margin));
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  display: flex;
  justify-content: center;
  align-items: center;
}

.tooltip.hidden {
  display: none;
}

.tooltip.left,
.tooltip.right {
  top: calc(50% - var(--tt-height) / 2);
}

.tooltip.left {
  right: calc(100% + 1rem);
}

.tooltip.right {
  left: calc(100% + 1rem);
}

.tooltip.bottom,
.tooltip.top {
  left: calc(50% - var(--tt-width) / 2);
}

.tooltip.bottom {
  top: calc(100% + 1rem);
}

.tooltip.top {
  bottom: calc(100% + 1rem);
}

.tooltip::after {
  /* Arrow https://www.w3schools.com/css/css_tooltip.asp */
  content: ' ';
  position: absolute;
  border-style: solid !important;
  border-width: 5px !important;
}

.tooltip.left::after {
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-color: transparent transparent transparent black;
}

.tooltip.right::after {
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-color: transparent #212121 transparent transparent;
}

.tooltip.bottom::after {
  bottom: 100%; /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-color: transparent transparent #212121;
}

.tooltip.top::after {
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-color: #212121 transparent transparent;
}

/* Tablet */
@media (min-width: 651px) and (max-width: 1100px) {
  .tooltip {
    display: none;
  }
}

/* Phone */
@media (max-width: 650px) {
  .tooltip {
    display: none;
  }
}