src/components/base/tooltip/tooltip.scss

.gl-tooltip {
  @apply gl-text-sm;
  @apply gl-p-2;
  
  .tooltip-inner {
    @apply gl-shadow-md;
    @apply gl-rounded-base;
    @apply gl-leading-normal;
    @apply gl-font-normal;
    @apply gl-py-3;
    @apply gl-px-4;
    background: var(--gl-feedback-strong-background-color);
    color: var(--gl-feedback-strong-text-color);
  }

  .arrow {
    @apply gl-h-3;
    @apply gl-w-2;

    &::before {
      @apply gl-border-4;
    }
  }
}

.gl-tooltip.bs-tooltip-top,
.gl-tooltip.bs-tooltip-bottom {
  .arrow {
    @apply gl-w-3;
    @apply gl-h-2;
  }
}

.gl-tooltip.bs-tooltip-top .arrow::before {
  @apply gl-border-b-0;
  border-top-color: var(--gl-feedback-strong-background-color);
}

.gl-tooltip.bs-tooltip-right .arrow::before {
  @apply gl-border-l-0;
  border-right-color: var(--gl-feedback-strong-background-color);
}

.gl-tooltip.bs-tooltip-bottom .arrow::before {
  @apply gl-border-t-0;
  border-bottom-color: var(--gl-feedback-strong-background-color);
}

.gl-tooltip.bs-tooltip-left .arrow::before {
  @apply gl-border-r-0;
  border-left-color: var(--gl-feedback-strong-background-color);
}