fooltips.css

/*! github.com/filipelinhares/fooltips */

:root {
  --tooltip-multiline-width: 250px;
  --tooltip-background-color: rgb(0 0 0 / 80%);
  --tooltip-color: #fff;
  --tooltip-padding: 5px 8px;
  --tooltip-border-radius: 4px;
  --tooltip-font-size: 0.7rem;
  --tooltip-z-index: 10;
  --tooltip-content: aria-label;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  position: absolute;
  z-index: var(--tooltip-z-index);
  opacity: 0;
  visibility: hidden;
  padding: var(--tooltip-padding);
  font-size: var(--tooltip-font-size);
  color: var(--tooltip-color);
  text-align: center;
  word-wrap: break-word;
  white-space: pre;
  pointer-events: none;
  content: attr(var(--tooltip-content));
  background-color: var(--tooltip-background-color);
  border-radius: var(--tooltip-border-radius);
  -webkit-font-smoothing: subpixel-antialiased;
}

[data-tooltip]::before {
  position: absolute;
  z-index: var(--tooltip-z-index);
  opacity: 0;
  visibility: hidden;
  width: 0;
  height: 0;
  color: var(--tooltip-background-color);
  pointer-events: none;
  content: "";
  border: 5px solid transparent;
}

[data-tooltip]::after,
[data-tooltip]::before {
  transition: all 300ms;
}

[data-tooltip-multiline] {
  &::after {
    width: max-content;
    max-width: var(--tooltip-multiline-width);
    word-break: break-word;
    word-wrap: normal;
    white-space: pre-line;
    border-collapse: separate;
  }

  &[data-tooltip="bottom"]::after,
  &[data-tooltip="top"]::after {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  &[data-tooltip="left"]::after,
  &[data-tooltip="right"]::after {
    right: 100%;
  }
}

[data-tooltip]:hover,
[data-tooltip]:active,
[data-tooltip]:focus {

  &::before,
  &::after {
    opacity: 1;
    visibility: visible;
    text-decoration: none;
  }
}

[data-tooltip-multiline]:hover,
[data-tooltip-multiline]:active,
[data-tooltip-multiline]:focus {
  &::after {
    display: table-cell;
  }
}

[data-is-tooltiped],
.is-tooltiped {

  &::before,
  &::after {
    display: inline-block;
    opacity: 1;
    visibility: visible;
  }

  &.tooltip-multiline {
    &::after {
      display: table-cell;
    }
  }
}

[data-tooltip="bottom"],
[data-tooltip="bottom-right"],
[data-tooltip="bottom-left"] {
  &::after {
    top: 100%;
    right: 50%;
    margin-top: 5px;
  }

  &::before {
    top: auto;
    right: 50%;
    bottom: -5px;
    margin-right: -5px;
    border-bottom-color: var(--tooltip-background-color);
  }
}

[data-tooltip="bottom-right"] {
  &::after {
    right: auto;
    left: 50%;
    margin-left: -15px;
  }
}

[data-tooltip="bottom-left"]::after {
  margin-right: -15px;
}

[data-tooltip="top"],
[data-tooltip="top-right"],
[data-tooltip="top-left"] {
  &::after {
    right: 50%;
    bottom: 100%;
    margin-bottom: 5px;
  }

  &::before {
    top: -5px;
    right: 50%;
    bottom: auto;
    margin-right: -5px;
    border-top-color: var(--tooltip-background-color);
  }
}

[data-tooltip="top-right"] {
  &::after {
    right: auto;
    left: 50%;
    margin-left: -15px;
  }
}

[data-tooltip="top-left"]::after {
  margin-right: -15px;
}

[data-tooltip="bottom"]::after,
[data-tooltip="top"]::after {
  transform: translateX(50%);
}

[data-tooltip="left"] {
  &::after {
    right: 100%;
    bottom: 50%;
    margin-right: 5px;
    transform: translateY(50%);
  }

  &::before {
    top: 50%;
    bottom: 50%;
    left: -5px;
    margin-top: -5px;
    border-left-color: var(--tooltip-background-color);
  }
}

[data-tooltip="right"] {
  &::after {
    bottom: 50%;
    left: 100%;
    margin-left: 5px;
    transform: translateY(50%);
  }

  &::before {
    top: 50%;
    right: -5px;
    bottom: 50%;
    margin-top: -5px;
    border-right-color: var(--tooltip-background-color);
  }
}