amis2/scss/components/_tooltip.scss

.#{$ns}Tooltip {
  position: absolute;
  top: 0;
  left: 0;
  font-family: inherit;
  border-radius: var(--borderRadius);
  min-width: var(--Tooltip-minWidth);
  max-width: var(--Tooltip-maxWidth);
  text-align: left;
  white-space: normal;
  z-index: $zindex-tooltip;
  word-wrap: break-word;
  background: var(--Tooltip-bg);
  border: var(--Tooltip-borderWidth) solid var(--Tooltip-borderColor);
  box-shadow: var(--Tooltip-boxShadow);

  &-arrow {
    position: absolute;
    display: block;
    width: var(--Tooltip-arrow-width);
    height: var(--Tooltip-arrow-height);
    margin-left: calc(var(--Tooltip-arrow-width) * -1 / 2);
    left: 50%;

    &::before,
    &::after {
      position: absolute;
      display: block;
      content: '';
      border-color: transparent;
      border-style: solid;
    }
  }

  &--top {
    margin-top: calc(var(--Tooltip-arrow-height) * -1 - #{px2rem(2px)});

    .#{$ns}Tooltip-arrow {
      bottom: calc(
        (var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1
      );
    }

    .#{$ns}Tooltip-arrow::before,
    .#{$ns}Tooltip-arrow::after {
      border-width: var(--Tooltip-arrow-height)
        calc(var(--Tooltip-arrow-width) / 2) 0;
    }

    .#{$ns}Tooltip-arrow::before {
      bottom: 0;
      border-top-color: var(--Tooltip-arrow-outerColor);
    }

    .#{$ns}Tooltip-arrow::after {
      bottom: var(--Tooltip-borderWidth);
      border-top-color: var(--Tooltip-arrow-color);
    }
  }

  &--right {
    margin-left: calc(var(--Tooltip-arrow-height) + #{px2rem(2px)});

    .#{$ns}Tooltip-arrow {
      left: calc(var(--Tooltip-borderWidth) * -1);
      width: var(--Tooltip-arrow-height);
      height: var(--Tooltip-arrow-width);
      margin-top: calc(var(--Tooltip-arrow-width) / -2);
      top: 50%;
    }

    .#{$ns}Tooltip-arrow::before,
    .#{$ns}Tooltip-arrow::after {
      border-width: calc(var(--Tooltip-arrow-width) / 2)
        var(--Tooltip-arrow-height) calc(var(--Tooltip-arrow-width) / 2) 0;
    }

    .#{$ns}Tooltip-arrow::before {
      left: 0;
      border-right-color: var(--Tooltip-arrow-outerColor);
    }

    .#{$ns}Tooltip-arrow::after {
      left: var(--Tooltip-borderWidth);
      border-right-color: var(--Tooltip-arrow-color);
    }
  }

  &--bottom {
    margin-top: calc(var(--Tooltip-arrow-height) + #{px2rem(2px)});

    .#{$ns}Tooltip-arrow {
      top: calc(
        (var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1
      );
    }

    .#{$ns}Tooltip-arrow::before,
    .#{$ns}Tooltip-arrow::after {
      border-width: 0 calc(var(--Tooltip-arrow-width) / 2)
        var(--Tooltip-arrow-height) calc(var(--Tooltip-arrow-width) / 2);
    }

    .#{$ns}Tooltip-arrow::before {
      top: 0;
      border-bottom-color: var(--Tooltip-arrow-outerColor);
    }

    .#{$ns}Tooltip-arrow::after {
      top: var(--Tooltip-borderWidth);
      border-bottom-color: var(--Tooltip-arrow-color);
    }

    // This will remove the popover-header's border just below the arrow
    .#{$ns}Tooltip-title::before {
      position: absolute;
      top: 0;
      left: 50%;
      display: block;
      width: var(--Tooltip-arrow-width);
      margin-left: calc(var(--Tooltip-arrow-width) / -2);
      content: '';
      border-bottom: var(--Tooltip-borderWidth) solid var(--Tooltip-title-bg);
    }
  }

  &--left {
    margin-left: calc(var(--Tooltip-arrow-height) * -1 - #{px2rem(2px)});

    .#{$ns}Tooltip-arrow {
      left: auto;
      right: calc(
        (var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1
      );
      width: var(--Tooltip-arrow-height);
      height: var(--Tooltip-arrow-width);
      margin-top: calc(var(--Tooltip-arrow-width) * -1 / 2);
      top: 50%;
    }

    .#{$ns}Tooltip-arrow::before,
    .#{$ns}Tooltip-arrow::after {
      border-width: calc(var(--Tooltip-arrow-width) / 2) 0
        calc(var(--Tooltip-arrow-width) / 2) var(--Tooltip-arrow-height);
    }

    .#{$ns}Tooltip-arrow::before {
      right: 0;
      border-left-color: var(--Tooltip-arrow-outerColor);
    }

    .#{$ns}Tooltip-arrow::after {
      right: var(--Tooltip-borderWidth);
      border-left-color: var(--Tooltip-arrow-color);
    }
  }

  &-title {
    padding: var(--Tooltip-title-paddingY) var(--Tooltip-title-paddingX);
    margin-bottom: 0; // Reset the default from Reboot
    font-size: var(--fontSizeBase);
    color: var(--Tooltip-title-color);
    background: var(--Tooltip-title-bg);
    border-bottom: var(--Tooltip-borderWidth) solid
      var(--Tooltip-title-borderBottom-color);
    border-top-left-radius: calc(
      var(--Tooltip-borderRadius) - var(--Tooltip-borderWidth)
    );
    border-top-right-radius: calc(
      var(--Tooltip-borderRadius) - var(--Tooltip-borderWidth)
    );
    font-weight: var(--Tooltip-title-fontWeight);

    &:empty {
      display: none;
    }
  }

  &-body {
    color: var(--Tooltip-body-color);
    padding: var(--Tooltip-body-paddingY) var(--Tooltip-body-paddingX);
  }

  &--dark {
    background: var(--Tooltip-bg--dark);
    border: none;
    box-shadow: var(--Tooltip-boxShadow--dark);

    .#{$ns}Tooltip-title {
      color: var(--Tooltip-title-color--dark);
      background: transparent;
      border-bottom: none;

      &::before {
        border-bottom-color: transparent;
      }
    }

    .#{$ns}Tooltip-body {
      color: var(--Tooltip-body-color--dark);
    }

    $placements: top left right bottom;
    &.#{$ns}Tooltip--top {
      .#{$ns}Tooltip-arrow {
        &::before {
          border-width: 0;
        }
        &::after {
          border-top-color: var(--Tooltip-arrow-color--dark);
        }
      }
    }

    &.#{$ns}Tooltip--bottom {
      .#{$ns}Tooltip-arrow {
        &::before {
          border-width: 0;
        }
        &::after {
          border-bottom-color: var(--Tooltip-arrow-color--dark);
        }
      }
    }

    &.#{$ns}Tooltip--left {
      .#{$ns}Tooltip-arrow {
        &::before {
          border-width: 0;
        }
        &::after {
          border-left-color: var(--Tooltip-arrow-color--dark);
        }
      }
    }

    &.#{$ns}Tooltip--right {
      .#{$ns}Tooltip-arrow {
        &::before {
          border-width: 0;
        }
        &::after {
          border-right-color: var(--Tooltip-arrow-color--dark);
        }
      }
    }
  }
}

.#{$ns}TooltipWrapper {
  &--inline {
    display: inline-block;
  }
}

@keyframes tooltipIn {
  from {
    opacity: 0;
    margin: 0;
  }
}

[data-tooltip] {
  position: relative;

  &:after {
    pointer-events: none;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    content: attr(data-tooltip);
    font-size: var(--Tooltip--attr-fontSize);
    line-height: var(--Tooltip--attr-lineHeigt);
    text-align: left;
    white-space: normal;
    width: max-content;
    box-sizing: content-box;
    max-width: 300px;
    background: var(--Tooltip--attr-bg);
    border: var(--Tooltip--attr-borderWidth) solid
      var(--Tooltip--attr-borderColor);
    border-radius: var(--Tooltip--attr-borderRadius);
    box-shadow: var(--Tooltip--attr-boxShadow);
    left: 100%;
    color: var(--Tooltip--attr-color);
    padding: var(--Tooltip--attr-paddingY) var(--Tooltip--attr-paddingX);
    display: none;
    animation-duration: var(--animation-duration);
    animation-fill-mode: both;

    @media screen and (min-width: 0\0) {
      white-space: nowrap;
      max-width: unset;
    }
  }

  &:not(.is-disabled):hover:after {
    display: inline-block;
    animation-name: tooltipIn;

    opacity: 1;
    z-index: $zindex-tooltip;
    margin: 0 0 0 var(--Tooltip--attr-gap);
    opacity: 1;
  }

  &[data-position='bottom']:after {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
  }

  &[data-position='bottom']:hover:after {
    margin: var(--Tooltip--attr-gap) 0 0 0;
  }

  &[data-position='left']:after {
    top: 50%;
    right: 100%;
    left: auto;
    transform: translateY(-50%);
  }

  &[data-position='left']:hover:after {
    margin: 0 var(--Tooltip--attr-gap) 0 0;
  }

  &[data-position='top']:after {
    left: 50%;
    top: auto;
    bottom: 100%;
    transform: translateX(-50%);
  }

  &[data-position='top']:hover:after {
    margin: calc(var(--Tooltip--attr-gap) * -1) 0 0 0;
  }

  &:hover:active:after {
    content: '';
    display: none !important;
  }
}