@helpwave/hightide/dist/style/uncompiled/theme/components/tooltip.css

helpwave's component and theming library

@utility animate-tooltip-fade-in {
  animation: fade-in calc(var(--animation-duration-in, 250ms) * 2) ease-in-out 1 forwards;
}

@utility animate-tooltip-fade-out {
  animation: fade-in var(--animation-duration-out, 170ms) ease-in-out 1 reverse
  forwards;
}

@layer components {
  [data-name="tooltip"] {
    @apply absolute px-2 py-1 rounded shadow-around-md;
    @apply text-xs font-semibold text-tooltip-text bg-tooltip-background truncate;

    &[data-state="opening"][data-animated] {
      @apply animate-tooltip-fade-in;
    }
    &[data-state="closing"][data-animated] {
      @apply animate-tooltip-fade-out;
    }
    &[data-state="closed"] {
      @apply opacity-0;
    }
  }

  [data-name="tooltip-triangle"] {
    @apply absolute w-0 h-0;
    --triangle-size: calc(1.5 * var(--spacing));

    &[data-state="opening"] {
      @apply animate-tooltip-fade-in;
    }
    &[data-state="closing"] {
      @apply animate-tooltip-fade-out;
    }
    &[data-state="closed"] {
      @apply opacity-0;
    }

    &[data-position="top"] {
      @apply border-t-tooltip-background border-l-transparent border-r-transparent;
      border-width: var(--triangle-size) var(--triangle-size) 0
        var(--triangle-size);
      transform: translate(0, var(--triangle-size));
    }
    &[data-position="bottom"] {
      @apply border-b-tooltip-background border-l-transparent border-r-transparent;
      border-width: 0 var(--triangle-size) var(--triangle-size)
        var(--triangle-size);
      transform: translate(0, calc(-1 * var(--triangle-size)));
    }
    &[data-position="left"] {
      @apply border-l-tooltip-background border-t-transparent border-b-transparent;
      border-width: var(--triangle-size) 0 var(--triangle-size)
        var(--triangle-size);
      transform: translate(var(--triangle-size), 0);
    }
    &[data-position="right"] {
      @apply border-r-tooltip-background border-t-transparent border-b-transparent;
      border-width: var(--triangle-size) var(--triangle-size)
        var(--triangle-size) 0;
      transform: translate(calc(-1 * var(--triangle-size)), 0);
    }
  }
}