@radix-ui/themes/src/components/tooltip.css

[](https://radix-ui.com/themes)

.rt-TooltipContent {
  box-sizing: border-box;
  padding: var(--space-1) var(--space-2);
  background-color: var(--gray-12);
  border-radius: var(--radius-2);

  transform-origin: var(--radix-tooltip-content-transform-origin);

  animation-duration: 140ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

  @media (prefers-reduced-motion: no-preference) {
    &:where([data-state='delayed-open']) {
      &:where([data-side='top']) {
        animation-name: rt-slide-from-top, rt-fade-in;
      }
      &:where([data-side='bottom']) {
        animation-name: rt-slide-from-bottom, rt-fade-in;
      }
      &:where([data-side='left']) {
        animation-name: rt-slide-from-left, rt-fade-in;
      }
      &:where([data-side='right']) {
        animation-name: rt-slide-from-right, rt-fade-in;
      }
    }
  }
}

.rt-TooltipText {
  color: var(--gray-1);
  user-select: none;
  cursor: default;
}

.rt-TooltipArrow {
  fill: var(--gray-12);
}