flotilla/src/lib/components/tooltip.css

@layer components {
  .tip {
    @apply relative;

    &[data-tip]::before {
      content: attr(data-tip);
      @apply z-tooltip pointer-events-none absolute max-w-32 overflow-hidden rounded-xl bg-black px-2 py-1 text-xs text-ellipsis whitespace-nowrap text-white/90 opacity-0;
      transition: opacity 0.15s ease;
    }

    &[data-tip]:hover::before {
      @apply opacity-100;
    }
  }

  .tip-top[data-tip]::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-0.4rem);
  }

  .tip-left[data-tip]::before {
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-0.4rem);
  }

  .tip-right[data-tip]::before {
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(0.4rem);
  }

  /* mobile hides hover tooltips */
  .mobile .tip[data-tip]::before {
    display: none !important;
  }
}