Command Palette
Search for a command to run...
Tooltip
Displays additional information on hover or focus.About Tooltip
A popup component that shows contextual information when users hover over or focus on an element. Automatically wraps with a provider for consistent delay behavior across all tooltips. Supports positioning on all sides with smooth animations.Installation
Import the Tooltip component from LSD:import { Tooltip } from '@nipsys/lsd'
export default function MyComponent() {
return <Tooltip />
}Usage
The simplest form of the component with default styling.Basic
Features
Additional features and capabilities of the component.Positions
With Icon
Composition
Tooltip
├── TooltipProvider
├── TooltipTrigger
└── TooltipContent
API Reference
Radix UI Documentation
Tooltip wraps Radix UI primitives
Accessibility
The component follows accessibility best practices for screen readers and keyboard navigation.Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate to the tooltip trigger• Shift + Tab - Navigate to previous element
ARIA Attributes
Proper ARIA attributes for screen readers
• role="tooltip" identifies the content as a tooltip• aria-describedby links the trigger to the tooltip
Focus States
Visible focus indicators for keyboard users
• Tooltip content is not focusable. Focus remains on the trigger element when the tooltip is visible. Screen readers announce tooltip content when the trigger receives focus.