/* app/assets/stylesheets/components/tooltips.css */

.tooltip {
  @apply relative inline-flex !overflow-visible;
}

.tooltip::before {
  content: attr(data-tooltip);
  @apply absolute left-1/2 -translate-x-1/2
         px-2 py-1 text-xs font-medium text-white bg-gray-800 rounded
         whitespace-nowrap pointer-events-none opacity-0
         transition-opacity duration-150 z-50;
  bottom: calc(100% + 6px);
}

.tooltip::after {
  content: "";
  @apply absolute left-1/2 -translate-x-1/2
         border-4 border-transparent border-t-gray-800
         pointer-events-none opacity-0
         transition-opacity duration-150 z-50;
  bottom: calc(100% + 2px);
}

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