@hummingbirdui/hummingbird/src/components/tooltip.css

An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.

.tooltip {
  --tooltip-zindex: 1080;
  --tooltip-max-width: 12.5rem;
  --tooltip-padding-x: --spacing(2.5);
  --tooltip-padding-y: --spacing(2);
  --tooltip-bg: var(--color-dark);
  --tooltip-color: var(--color-white);
  --tooltip-font-size: var(--text-xs);
  --tooltip-margin: --spacing(2);
  --tooltip-opacity: 1;
  --tooltip-border-radius: var(--radius-sm);
  --tooltip-arrow-width: 0.75rem;
  --tooltip-arrow-height: 0.53rem;
  --tooltip-arrow-border-radius: --spacing(0.5);
  @apply z-[var(--tooltip-zindex)] block
  text-[length:var(--tooltip-font-size)]
  break-words
  leading-[1.2]
  opacity-0
  transition-opacity duration-200;
  &.show {
    @apply opacity-[var(--tooltip-opacity)];
  }
  .tooltip-arrow {
    @apply w-[var(--tooltip-arrow-width)]
    h-[var(--tooltip-arrow-height)]
    overflow-hidden;

    &::before {
      @apply content-['']
      block w-full h-full
      bg-[var(--tooltip-bg)]
      rotate-45;
    }
  }
}

.bs-tooltip-auto {
  &[data-popper-placement^='top'] {
    @apply mb-[var(--tooltip-margin)]!;
    .tooltip-arrow {
      @apply bottom-0 -mb-[var(--tooltip-arrow-height)];
      &::before {
        @apply origin-[100%_0]
        rounded-br-[var(--tooltip-arrow-border-radius)];
      }
    }
  }
  &[data-popper-placement^='right'] {
    --tooltip-arrow-height: 0.75rem;
    --tooltip-arrow-width: 0.53rem;
    @apply ml-[var(--tooltip-margin)]!;
    .tooltip-arrow {
      @apply left-0 -ml-[var(--tooltip-arrow-width)];
      &::before {
        @apply origin-[100%_100%]
        rounded-bl-[var(--tooltip-arrow-border-radius)];
      }
    }
  }
  &[data-popper-placement^='bottom'] {
    @apply mt-[var(--tooltip-margin)]!;
    .tooltip-arrow {
      @apply top-0 -mt-[var(--tooltip-arrow-height)];
      &::before {
        @apply origin-[0px_100%]
        rounded-tl-[var(--tooltip-arrow-border-radius)];
      }
    }
  }
  &[data-popper-placement^='left'] {
    --tooltip-arrow-height: 0.75rem;
    --tooltip-arrow-width: 0.53rem;
    @apply mr-[var(--tooltip-margin)]!;
    .tooltip-arrow {
      @apply right-0 -mr-[var(--tooltip-arrow-width)];
      &::before {
        @apply origin-[0_0]
        rounded-tr-[var(--tooltip-arrow-border-radius)];
      }
    }
  }
}

.tooltip-inner {
  @apply max-w-[var(--tooltip-max-width)]
  bg-[var(--tooltip-bg)]
  px-[var(--tooltip-padding-x)]
  py-[var(--tooltip-padding-y)]
  text-center text-[var(--tooltip-color)]
  rounded-[var(--tooltip-border-radius)];
}