`Hint` is a tooltip component that displays helpful information when users hover over or focus on an element.

Features:

- Hover and focus interactions for accessibility - Flexible placement options (left-start, right-start) - Customizable icons and content - Dark and default variants - Controlled and uncontrolled modes - Delay configuration for better UX - Portal rendering for proper z-index handling - Disabled state support - Smooth animations and transitions

Usage Guidelines:

- Use for providing additional context or help text - Place hints near form labels or complex UI elements - Keep content concise and actionable - Use appropriate placement based on available space - Consider delay for frequently hovered elements

Accessibility:

- Keyboard accessible (focus triggers tooltip) - Proper ARIA roles and attributes - Screen reader friendly - Respects disabled state Basic: Demonstrates the simplest usage of Hint component.

Features:

- Default right-start placement - Standard info icon - Simple text content - Hover/focus to show tooltip

This is the foundation for all other Hint variations.

Placements: Demonstrates different tooltip positioning options.

Features:

- left-start: Tooltip appears on the left side - right-start: Tooltip appears on the right side (default) - Automatic fallback when space is insufficient - Consistent behavior across different alignments

Placement Guidelines:

- Use right-start when hint is after a label - Use left-start when hint is before a label - Component automatically flips if there's not enough space

CustomIcon: Demonstrates how to use custom icons in hint tooltips.

Features:

- Replace default info icon with any React element - Maintains consistent tooltip behavior - Flexible icon system integration - Icon appears both in trigger and tooltip content

Use Cases:

- Brand-specific icons - Contextual icons (warning, help, etc.) - Custom design system icons

Variants: Demonstrates different visual variants of the Hint component.

Features:

- default: Light background with dark text (follows theme) - dark: Dark background with light text - Consistent behavior across variants

Usage Guidelines:

- Use default variant in light themes - Use dark variant in dark themes or for contrast - Use accent variant in accent areas - Match variant to surrounding UI context

Disabled: Shows hint component in disabled state.

Features:

- Disabled interaction state - Visual indication of unavailable tooltip - Maintains layout consistency when disabled - Prevents hover/focus activation - Tooltip will not appear even on hover

Use Cases:

- Conditional help text - Feature flags - Progressive disclosure

Delay: Demonstrates delayed tooltip display for better UX.

Features:

- Configurable delay before showing tooltip - Prevents accidental triggers - Improves user experience for frequently hovered elements - Delay only applies to opening, closing is immediate

Use Cases:

- Dense UI where hints might be accidentally triggered - Reducing visual noise in complex interfaces - Better UX for power users

Controlled: Demonstrates controlled mode for programmatic control.

Features:

- External control of tooltip visibility - onOpenChange callback for state synchronization - Useful for complex interactions - Can be combined with other UI logic

Use Cases:

- Integration with form validation - Custom interaction patterns - Programmatic show/hide logic

LongContent: Tests hint behavior with extensive text content.

Features:

- Automatic text wrapping for long content - Maintains optimal width for readability - Preserves tooltip positioning with larger content - Responsive design adaptation

Best Practices:

- Keep content concise when possible - Break long content into multiple lines naturally - Consider using links or actions in long tooltips

RealWorldExamples: Demonstrates practical usage scenarios.

Features:

- Form label hints - Settings explanations - Feature descriptions - Help text in various contexts

These examples show how Hint integrates into real applications.