Basic Tooltip Tailwind

tooltip.css

  [data-tooltip] {
    @apply relative;
    &:before,
    &:after {
      @apply absolute opacity-0;
      @apply opacity-0 transition-opacity duration-500;
      content: '';
      left: 50%;
    }

    &:before {
      @apply text-center whitespace-nowrap text-xs;
      @apply bg-black/75 text-white px-2 py-1 text-sm z-10;
      @apply rounded-lg;
      content: attr(data-tooltip);
      transform: translateX(-50%) translateY(calc(-100% - 3px));
    }

    &:after {
      transform: translateX(-50%) translateY(-3px);
      @apply border-5 border-transparent border-t-black/75;
    }

    &:hover:after,
    &:hover:before {
      @apply opacity-100;
    }
  }