Position	Description	CSS Rotation
top	Top-center arrow	-135deg
top-left	Top-left aligned arrow	-135deg
top-right	Top-right aligned arrow	-135deg
bottom	Bottom-center arrow	45deg
bottom-left	Bottom-left aligned arrow	45deg
bottom-right	Bottom-right aligned arrow	45deg
left	Left-center arrow	135deg
left-top	Left-top aligned arrow	135deg
left-bottom	Left-bottom aligned arrow	135deg
right	Right-center arrow	-45deg
right-top	Right-top aligned arrow	-45deg
right-bottom	Right-bottom aligned arrow	-45deg

Styling

Base styling with Tailwind:

.pu-tooltip {
  @apply relative border-2 border-primary-light-500 bg-white 
        rounded-lg text-center p-4 shadow-lg shadow-primary-light-500/20;
}

.tooltip-arrow {
  @apply absolute w-6 h-6 bg-white transform z-10 rounded-sm;
  border: 2px solid inherit;
}

Technical Implementation

Arrow Positioning System

Dynamic CSS transforms based on position
Precision placement using Tailwind spacing utilities
Inherits border color from parent container

CSS Clip-Path Technique

.tooltip-arrow::before {
  content: '';
  clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
  @apply absolute w-[39px] h-[39px] bg-white rotate-[135deg];
}

Props

Prop	Type	Description
type	TooltipPosition	Specific position variant to display

Type Definition

type TooltipPosition = 
  | 'top' | 'top-left' | 'top-right'
  | 'bottom' | 'bottom-left' | 'bottom-right'
  | 'left' | 'left-top' | 'left-bottom'
  | 'right' | 'right-top' | 'right-bottom'