tessl/npm-radix-ui--react-tooltip

A React tooltip component from Radix UI Primitives, part of an open-source UI component library for building high-quality, accessible design systems and web apps

Overall
score

96%

Overview

Eval results

Files

Arrow and Visual Enhancement

Name: tessl/npm-radix-ui--react-tooltip
Author: tessl

The TooltipArrow component provides a visual arrow/pointer that connects the tooltip content to its trigger, enhancing the visual relationship and user experience.

Capabilities

TooltipArrow Component

Optional arrow component that renders as an SVG element pointing from tooltip content toward the trigger.

/**
 * Arrow/pointer component for tooltips
 * Renders as SVG element that points from content to trigger
 * @param width - Width of arrow in pixels
 * @param height - Height of arrow in pixels
 * @param offset - Offset from content edge in pixels
 */
type TooltipArrowElement = React.ComponentRef<"svg">;
interface TooltipArrowProps extends React.ComponentPropsWithoutRef<"svg"> {
  width?: number;
  height?: number;
  offset?: number;
}

const TooltipArrow: React.forwardRef<TooltipArrowElement, TooltipArrowProps>;

Usage Examples:

import { 
  TooltipProvider, 
  Tooltip, 
  TooltipTrigger,
  TooltipPortal,
  TooltipContent,
  TooltipArrow
} from "@radix-ui/react-tooltip";

// Basic arrow
function BasicArrowTooltip() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover me</TooltipTrigger>
        <TooltipPortal>
          <TooltipContent>
            Tooltip with arrow
            <TooltipArrow />
          </TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

// Custom sized arrow
function CustomArrow() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover me</TooltipTrigger>
        <TooltipPortal>
          <TooltipContent>
            Large arrow tooltip
            <TooltipArrow width={15} height={10} />
          </TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

// Styled arrow
function StyledArrow() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover me</TooltipTrigger>
        <TooltipPortal>
          <TooltipContent className="custom-tooltip">
            Styled tooltip
            <TooltipArrow 
              className="custom-arrow"
              fill="var(--tooltip-background)"
              stroke="var(--tooltip-border)"
              strokeWidth={1}
            />
          </TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

// Arrow with offset
function OffsetArrow() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover me</TooltipTrigger>
        <TooltipPortal>
          <TooltipContent>
            Arrow with offset
            <TooltipArrow offset={10} />
          </TooltipContent>
        </TooltipPortal>
      </Tooltip>
    </TooltipProvider>
  );
}

Arrow Props

width

Controls the width of the arrow.

Type: number
Default: 10 pixels
Description: Width of the arrow SVG element

height

Controls the height of the arrow.

Type: number
Default: 5 pixels
Description: Height of the arrow SVG element

offset

Controls the offset from the content edge.

Type: number
Default: 0 pixels
Description: Distance from content edge where arrow is positioned

SVG Props

Arrow accepts all standard SVG props for styling:

fill: string - Fill color of the arrow
stroke: string - Stroke color of the arrow
strokeWidth: number - Width of arrow stroke
className: string - CSS class for styling
style: React.CSSProperties - Inline styles

Arrow Positioning

The arrow automatically positions itself based on:

Content placement: Adjusts to content's side relative to trigger
Alignment: Centers along the appropriate axis
Collision avoidance: Repositions when content moves due to collisions
Content padding: Respects arrowPadding prop on TooltipContent

Arrow Styling

Default Styling

The arrow renders as a simple filled triangle with:

Default size: 10px width × 5px height
Default fill: Inherits from parent or CSS
No stroke by default

Custom Styling

/* Style the arrow */
.custom-arrow {
  fill: #333;
  stroke: #666;
  stroke-width: 1px;
}

/* Style based on tooltip side */
.tooltip-content[data-side="top"] .arrow {
  fill: var(--tooltip-bg-top);
}

.tooltip-content[data-side="bottom"] .arrow {
  fill: var(--tooltip-bg-bottom);
}

CSS Variables

Arrow inherits CSS custom properties from content:

--radix-tooltip-content-transform-origin
Tooltip content background colors
Border colors and styles

Arrow Behavior

Automatic Orientation

Arrow automatically orients based on tooltip placement:

Top placement: Arrow points downward
Bottom placement: Arrow points upward
Left placement: Arrow points rightward
Right placement: Arrow points leftward

Collision Response

When tooltip content repositions due to collisions:

Arrow updates its orientation to match new placement
Arrow position adjusts to maintain visual connection
Arrow respects collision boundaries and padding

Accessibility

The arrow is purely decorative and:

Does not interfere with screen readers
Is properly hidden from accessibility tree
Does not affect keyboard navigation

Arrow Aliases

const Arrow: React.forwardRef<TooltipArrowElement, TooltipArrowProps>;

The Arrow component is an alias for TooltipArrow for shorter import names.

Types

type TooltipArrowElement = React.ComponentRef<"svg">;

type TooltipArrowProps = React.ComponentPropsWithoutRef<"svg"> & {
  width?: number;
  height?: number;
  offset?: number;
};

Install with Tessl CLI

npx tessl i tessl/npm-radix-ui--react-tooltip