spur-tailwind/css/components/tooltip.css

Spur web UI

.tooltip {
  @apply inline-block font-semibold;

  &:hover .tooltip-content {
    @apply opacity-100;
  }
}

.tooltip-content {
  @apply z-20 rounded-md shadow-md opacity-0 pointer-events-none;
  transition: opacity 200ms ease-in-out;

  &[x-placement='top-start']::after,
  &[x-placement='top']::after,
  &[x-placement='top-end']::after,
  &[x-placement='bottom-start']::after,
  &[x-placement='bottom']::after,
  &[x-placement='bottom-end']::after,
  &[x-placement='left-start']::after,
  &[x-placement='left']::after,
  &[x-placement='left-end']::after,
  &[x-placement='right-start']::after,
  &[x-placement='right']::after,
  &[x-placement='right-end']::after {
    @apply absolute block text-white text-xl leading-none;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: -1;
    font-size: 2rem;
  }

  &[x-placement='top-start']::after,
  &[x-placement='bottom-start']::after {
    left: 1rem;
    transform: scale(1, 0.5);
  }

  &[x-placement='top']::after,
  &[x-placement='bottom']::after {
    left: 50%;
    transform: scale(1, 0.5) translateX(-50%);
  }

  &[x-placement='top-end']::after,
  &[x-placement='bottom-end']::after {
    right: 1rem;
    transform: scale(1, 0.5);
  }

  &[x-placement='top-start']::after,
  &[x-placement='top']::after,
  &[x-placement='top-end']::after {
    bottom: -1.25rem;
    content: '▼';
  }

  &[x-placement='bottom-start']::after,
  &[x-placement='bottom']::after,
  &[x-placement='bottom-end']::after {
    top: -1.375rem;
    content: '▲';
  }

  &[x-placement='left-start']::after,
  &[x-placement='right-start']::after {
    top: 0.325rem;
    transform: scale(0.75, 1);
  }

  &[x-placement='left']::after,
  &[x-placement='right']::after {
    top: 50%;
    transform: scale(0.75, 1) translateY(-62.5%);
  }

  &[x-placement='left-end']::after,
  &[x-placement='right-end']::after {
    bottom: 0.825rem;
    transform: scale(0.75, 1);
  }

  &[x-placement='left-start']::after,
  &[x-placement='left']::after,
  &[x-placement='left-end']::after {
    right: -1rem;
    content: '►';
  }

  &[x-placement='right-start']::after,
  &[x-placement='right']::after,
  &[x-placement='right-end']::after {
    left: -1rem;
    content: '◄';
  }
}

.tooltip-content-wrapper {
  @apply rounded-md relative z-10 px-8 py-4 bg-white;
}