tooltip.tsx

Overview

tooltip.tsx is a React component module that provides reusable tooltip UI components built on top of the Radix UI Tooltip primitives (@radix-ui/react-tooltip) and customized with Tailwind CSS utility classes. It includes:

• A set of low-level tooltip components (Tooltip, TooltipTrigger, TooltipContent, TooltipProvider) directly wrapping Radix primitives with custom styling.

• A FormTooltip component for easily adding info tooltips to forms, displaying an info icon with a popup tooltip on hover/focus.

• An AntToolTip component implementing a custom tooltip with configurable placement (top, bottom, left, right) and trigger behaviors (hover, click, focus) without relying on Radix primitives.

This file serves as a centralized tooltip solution in the application, offering both Radix-based tooltips and a lightweight custom tooltip alternative.

Components and Exports

1. Tooltip Primitives Wrappers

These components re-export or wrap Radix UI Tooltip primitives with additional styling:

• TooltipProvider

  • Wrapper around TooltipPrimitive.Provider

  • Provides context for tooltip components

• Tooltip (TooltipPrimitive.Root)

  • The root component managing tooltip state

• TooltipTrigger (TooltipPrimitive.Trigger)

  • Element that triggers the tooltip appearance on hover/focus

• TooltipContent

  • Wrapped Radix TooltipPrimitive.Content with forwarded ref

  • Adds Tailwind CSS classes for styling, animations, and positioning

  • Props:

    • className?: string — additional CSS classes

    • sideOffset?: number — offset distance between trigger and tooltip (default: 4)

    • All other native TooltipPrimitive.Content props

<TooltipContent sideOffset={6} className="custom-style">
  Tooltip text or elements here
</TooltipContent>

Implementation Details:
TooltipContent uses React.forwardRef to pass refs to the underlying Radix component for proper positioning and accessibility. It applies animations and styling tailored for a popover look with a max width of 20% viewport width.

2. FormTooltip

A simple component to display an info icon with an associated tooltip. Useful for form fields or inputs where you need to show contextual help.

Props:

• tooltip: React.ReactNode — content to show inside the tooltip

Usage Example:

<FormTooltip tooltip="This field is required for registration." />

Behavior:

• Renders an Info icon (from lucide-react) as the trigger, non-focusable (tabIndex={-1})

• Tooltip shows on hover/focus via Tooltip, TooltipTrigger, and TooltipContent components

3. AntToolTip

A fully controlled, custom tooltip component with configurable placement and trigger behavior.

Props:

Usage Example:

<AntToolTip title="More info here" placement="right" trigger="click">
  <button>Hover or click me</button>
</AntToolTip>

Behavior and Implementation:

• Manages internal visible state controlling tooltip visibility

• Shows/hides tooltip based on configured trigger:

  • 'hover' or 'focus': uses onMouseEnter, onMouseLeave, onFocus, and onBlur events

  • 'click': toggles visibility on onClick

• Positions tooltip using utility classes computed by getPlacementClasses() depending on placement prop

• Tooltip arrow is a rotated square (div) positioned dynamically to point to the trigger element

• Uses Tailwind CSS for styling and transitions

Important Implementation Details

• The file leverages Radix UI primitives, which provide accessible, composable tooltip behavior, and extends them with custom styling and animations.

• TooltipContent uses React.forwardRef to pass refs properly, enabling correct positioning behavior by Radix.

• AntToolTip is a self-contained tooltip implementation useful when Radix dependencies are not desired or a more customizable approach is needed.

• The use of utility function cn (likely a classnames merge helper) allows merging default and custom CSS classes seamlessly.

Interaction with Other Parts of the System

• Imports cn from @/lib/utils, a utility for combining CSS class names.

• Imports Info icon from lucide-react to render an info symbol in FormTooltip.

• Uses Radix UI Tooltip primitives (@radix-ui/react-tooltip), which provide foundational accessible tooltip logic and behavior.

• The components exported here are intended for use throughout the React application wherever tooltip functionality is needed, especially in forms (FormTooltip) or UI elements requiring hover/click tooltips (AntToolTip).

Mermaid Component Diagram

componentDiagram
    component TooltipProvider
    component Tooltip
    component TooltipTrigger
    component TooltipContent
    component FormTooltip
    component AntToolTip

    TooltipProvider <|-- Tooltip
    Tooltip <|-- TooltipTrigger
    Tooltip <|-- TooltipContent

    FormTooltip ..> Tooltip : uses
    FormTooltip ..> TooltipTrigger : uses
    FormTooltip ..> TooltipContent : uses

    AntToolTip : manages visible state
    AntToolTip : supports hover, click, focus triggers
    AntToolTip : customizable placement

    AntToolTip --> children
    AntToolTip --> title

Summary

tooltip.tsx provides both Radix UI-based and custom tooltip React components with rich styling and configurable behavior. It abstracts complex tooltip interactions and accessibility concerns, enabling developers to easily integrate tooltips with multiple trigger modes and placements throughout the app. The file balances leveraging existing libraries with custom solutions for flexibility and maintainability.