[data-tooltip] {
  position: relative;
  cursor: pointer;

  &:after,
  &:before {
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: @zindex-tooltip;
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s ease-out 0.18s;
    transform: translate(-50%, 4px);
    transform-origin: top;
  }
  &:after {
    content: attr(aria-label);
    margin-bottom: 10px;
    padding: 0.5em 1em;
    border-radius: var(--radius-md);
    background: var(--color-text-1);
    color: var(--color-fill-1);
    font-size: @font-size-xs;
    white-space: nowrap;
  }
  &:before {
    content: "";
    width: 0;
    height: 0;
    transform-origin: top;
    border: (5 / 16rem) solid transparent;
    border-top-color: var(--color-text-1);
  }
  &:hover:before,
  &:hover:after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}