tooltips.css

:root {
  --tooltip-thingy-height: .5em;
}

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

/* The arrow (or tooltip thingy) that connects the tooltip to the container */
.tooltip-container::before {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: var(--tooltip-thingy-height) solid transparent;
  border-bottom-color: black;
}

/* This allows users to move their cursor from the button to the tooltip */
.tooltip-container::after {
  position: absolute;
  right: -20%;
  top: 100%;
  left: -20%;
  display: block;
  height: calc(var(--tooltip-thingy-height) * 2);
}

.tooltip-container.tooltip-visible::before,
.tooltip-container.tooltip-visible::after {
  content: '';
}

.tooltip-container.top::before,
.tooltip-container.top::after,
.tooltip-container.top [role="tooltip"] {
  top: unset;
  bottom: 100%;
}

.tooltip-container.top::before {
  border-top-color: black;
  border-bottom-color: transparent;
}

.tooltip-container.top [role="tooltip"] {
  bottom: calc(100% + calc(var(--tooltip-thingy-height) * 2));
}

/* Tooltip styles */
[role="tooltip"] {
  position: absolute;
  top: calc(100% + calc(var(--tooltip-thingy-height) * 2));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: .5em 1em;
  border-radius: .25em;
  color: white;
  background: black;
  min-width: max-content;
  max-width: 10em;
  box-shadow: 0 1px 2px hsl(0, 0%, 0%);
}

/* Hides the tooltip */
.hidden {
  display: none;
}

/*
  Removes the emoji container from the pointer event targets.
  If removed the globalPointerDown() function will break when you click/tap exactly on the emoji.
*/
[aria-hidden="true"] {
  pointer-events: none;
}

/* Unrelated to tooltip workings */
button {
  display: inline-block;
  position: relative;
  padding: .4em .7em;
  border: 1px solid hsl(213, 71%, 49%);
  border-radius: 5px;
  box-shadow: 0 1px 2px hsl(216, 27%, 55%);
  color: #fff;
  font-size: inherit;
  text-shadow: 0 -1px 1px hsl(216, 27%, 25%);
  background-color: hsl(216, 82%, 51%);
  background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
}

button:hover {
  border-color: hsl(213, 71%, 29%);
  background-color: hsl(216, 82%, 31%);
  background-image: linear-gradient(to bottom, hsl(216, 82%, 33%), hsl(216, 82%, 27%));
  cursor: default;
}

button:focus {
  outline: 2px transparent;
}

button:focus::before {
  position: absolute;
  z-index: -1;
  /* button border width - outline width - offset */
  top: calc(-1px - 3px - 3px);
  right: calc(-1px - 3px - 3px);
  bottom: calc(-1px - 3px - 3px);
  left: calc(-1px - 3px - 3px);
  border: 3px solid hsl(213, 71%, 49%);
  /* button border radius + outline width + offset */
  border-radius: calc(5px + 3px + 3px);
  content: '';
}

button:active {
  border-color: hsl(213, 71%, 49%);
  background-color: hsl(216, 82%, 31%);
  background-image: linear-gradient(to bottom, hsl(216, 82%, 53%), hsl(216, 82%, 47%));
  box-shadow: inset 0 3px 5px 1px hsl(216, 82%, 30%);
}

/* Totally useless but fun! (Note: maaaaaybe _don’t_ include this in the final PR) */
:root {
  --button-border: hsl(213, 71%, 49%);
  --button-background: hsl(216, 82%, 51%);
  --button-gradient-start: hsl(216, 82%, 53%);
  --button-gradient-end: hsl(216, 82%, 47%);
  --button-box-shadow: hsl(216, 27%, 55%);
  --button-text-shadow: hsl(216, 27%, 25%);

  --button-hover-border: hsl(213, 71%, 29%);
  --button-hover-background: hsl(216, 82%, 31%);
  --button-hover-gradient-start: hsl(216, 82%, 33%);
  --button-hover-gradient-end: hsl(216, 82%, 27%);

  --button-focus-border: hsl(213, 71%, 49%);

  --button-active-border: hsl(213, 71%, 49%);
  --button-active-background: hsl(216, 82%, 31%);
  --button-active-gradient-start: hsl(216, 82%, 53%);
  --button-active-gradient-end: hsl(216, 82%, 47%);
  --button-active-box-shadow: hsl(216, 82%, 30%);
}

@media (prefers-color-scheme: dark) {
	:root {
    --button-border: hsl(260, 10%, 39%);
    --button-background: hsl(269, 20%, 50%);
    --button-gradient-start: hsl(269, 20%, 53%);
    --button-gradient-end: hsl(269, 20%, 47%);
    --button-box-shadow: hsl(269, 7%, 25%);
    --button-text-shadow: hsl(269, 7%, 25%);

    --button-hover-border: hsl(260, 10%, 29%);
    --button-hover-background: hsl(269, 20%, 31%);
    --button-hover-gradient-start: hsl(269, 20%, 33%);
    --button-hover-gradient-end: hsl(269, 20%, 27%);

    --button-focus-border: hsl(260, 30%, 53%);

    --button-active-border: hsl(260, 10%, 39%);
    --button-active-background: hsl(269, 20%, 31%);
    --button-active-gradient-start: hsl(269, 20%, 53%);
    --button-active-gradient-end: hsl(269, 20%, 47%);
    --button-active-box-shadow: hsl(269, 20%, 30%);
  }
}

button {
  border-color: var(--button-border);
  box-shadow: 0 1px 2px var(--button-box-shadow);
  text-shadow: 0 -1px 1px var(--button-text-shadow);
  background-color: var(--button-background);
  background-image: linear-gradient(to bottom, var(--button-gradient-start), var(--button-gradient-end));
}

button:hover {
  border-color: var(--button-hover-border);
  background-color: var(--button-hover-background);
  background-image: linear-gradient(to bottom, var(--button-hover-gradient-start), var(--button-hover-gradient-end));
}

button:focus::before {
  border: 3px solid var(--button-focus-border);
}

button:active {
  border-color: var(--button-active-border);
  background-color: var(--button-active-background);
  background-image: linear-gradient(to bottom, var(--button-active-gradient-start), var(--button-active-gradient-end));
  box-shadow: inset 0 3px 5px 1px var(--button-active-box-shadow);
}