livebook/assets/css/tooltips.css

/* Tooltips */

/*
Example usage:

  <span class="tooltip top" aria-label="Delete">
    ...
  </span>
*/

/* Tooltip element wrapping the actual hoverable element */
.tooltip {
  position: relative;
  display: flex;
  --distance: 4px;
  --arrow-size: 5px;
  --show-delay: 0.5s;
}

.tooltip.distant {
  --distance: 28px;
}

.tooltip.distant-medium {
  --distance: 10px;
}

/* Tooltip text */
.tooltip:before {
  position: absolute;
  content: attr(aria-label);
  white-space: pre;
  text-align: center;
  display: block;
  background-color: #1c273c;
  color: #f0f5f9;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  padding: 3px 12px;
  z-index: 100;
  visibility: hidden;
  transition-property: visibility;
  transition-duration: 0s;
  transition-delay: 0s;
}

/* Tooltip arrow */
.tooltip:after {
  content: "";
  position: absolute;
  display: block;
  /* For the arrow we use the triangle trick: https://css-tricks.com/snippets/css/css-triangle/ */
  border-width: var(--arrow-size);
  border-style: solid;
  border-color: #1c273c;
  visibility: hidden;
  transition-property: visibility;
  transition-duration: 0s;
  transition-delay: 0s;
}

.tooltip:hover:before {
  visibility: visible;
  transition-delay: var(--show-delay);
}

.tooltip:hover:after {
  visibility: visible;
  transition-delay: var(--show-delay);
}

/*
Note: we let the arrow and content overlap 1px,
othrwise there's a tiny space between them.
*/

.tooltip.top:before {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, calc(1px - var(--arrow-size) - var(--distance)));
}

.tooltip.top:after {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, calc(0px - var(--distance)));

  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent;
}

.tooltip.bottom:before {
  top: 100%;
  left: 50%;
  transform: translate(-50%, calc(var(--arrow-size) - 1px + var(--distance)));
}

.tooltip.bottom:after {
  top: 100%;
  left: 50%;
  transform: translate(-50%, var(--distance));

  border-top: none;
  border-left-color: transparent;
  border-right-color: transparent;
}

.tooltip.right:before {
  top: 50%;
  left: 100%;
  transform: translate(calc(var(--arrow-size) - 1px + var(--distance)), -50%);
}

.tooltip.right:after {
  top: 50%;
  left: 100%;
  transform: translate(var(--distance), -50%);

  border-left: none;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.tooltip.left:before {
  top: 50%;
  right: 100%;
  transform: translate(calc(1px - var(--arrow-size) - var(--distance)), -50%);
}

.tooltip.left:after {
  top: 50%;
  right: 100%;
  transform: translate(calc(0px - var(--distance)), -50%);

  border-right: none;
  border-top-color: transparent;
  border-bottom-color: transparent;
}