Tooltip
Tooltips provide contextual information when users hover over, focus on, or click an element.
Overview
Tooltips are small, informative overlays that appear when users interact with an element. They provide additional context, descriptions, or helpful information without cluttering the interface.
All tooltip styles are built using design tokens, ensuring consistency across themes and hues. Use the interactive playground below to explore all available combinations.
Interactive Playground
Use the controls to customize the tooltip and see how it looks in real-time. Toggle between themes and hues to see how tooltips adapt to different contexts.
<Tooltip content="Tooltip">
<Button>Hover me</Button>
</Tooltip>Anatomy
A tooltip consists of a container with text content and an optional arrow pointer that indicates the relationship to the trigger element.
spacing-100 (vertical), spacing-200 (horizontal), border-radius-100--body-extra-small-text-sizeOptional pointer indicatorVariants & States
Tooltips can be positioned in four directions and triggered by different user interactions.
Top
Tooltip appears above the trigger element. Best for elements near the bottom of the viewport.
Bottom
Tooltip appears below the trigger element. Best for elements near the top of the viewport.
Left
Tooltip appears to the left of the trigger element. Best for elements on the right side of the viewport.
Right
Tooltip appears to the right of the trigger element. Best for elements on the left side of the viewport.
Hover Trigger
Tooltip appears when the user hovers over the trigger element. Most common trigger type.
Click Trigger
Tooltip appears when the user clicks the trigger element. Useful for mobile interactions.
Focus Trigger
Tooltip appears when the trigger element receives focus. Good for keyboard navigation.
Without Arrow
Tooltip without the arrow pointer. Use when the relationship to the trigger is clear.
For a complete matrix of all tooltip positions and triggers, see the Tooltip component in Figma.
Usage Guidelines
- Use tooltips to provide helpful, contextual information.
- Keep tooltip content concise and actionable.
- Use hover triggers for desktop interfaces.
- Position tooltips to avoid viewport edges.
- Ensure tooltips are accessible via keyboard navigation.
- Use tooltips to explain icons or abbreviations.
- Don't use tooltips for critical information that must always be visible.
- Don't put too much text in tooltips (keep it under 2-3 lines).
- Don't use tooltips as a replacement for proper labels.
- Don't trigger tooltips on click for desktop (use hover instead).
- Don't use tooltips for interactive content.
Accessibility
- Tooltips must be keyboard accessible. Use
trigger="focus"for keyboard users. - Provide descriptive content that screen readers can announce.
- Ensure tooltip content has sufficient contrast against the background.
- Don't rely solely on tooltips for essential information.
- Tooltips should not block important interactive elements.
API Reference
Tooltip component props and types.
TooltipProps
interface TooltipProps {
content: ReactNode;
children: ReactNode;
position?: "top" | "bottom" | "left" | "right";
trigger?: "hover" | "click" | "focus";
delay?: number;
maxWidth?: string;
showArrow?: boolean;
showBorder?: boolean;
showShadow?: boolean;
}Props
contentReactNodechildrenReactNodeposition"top" | "bottom" | "left" | "right""top"trigger"hover" | "click" | "focus""hover"delaynumber200maxWidthstring"200px"showArrowbooleantrueshowBorderbooleantrueshowShadowbooleantrueUsage Examples
Copyable code snippets for common tooltip use cases.
Basic Tooltip
import { Tooltip } from 'beacon-ui';
import { Button } from 'beacon-ui';
<Tooltip content="This is a tooltip">
<Button>Hover me</Button>
</Tooltip>All Positions
import { Tooltip } from 'beacon-ui';
import { Button } from 'beacon-ui';
<Tooltip content="Top tooltip" position="top">
<Button>Top</Button>
</Tooltip>
<Tooltip content="Bottom tooltip" position="bottom">
<Button>Bottom</Button>
</Tooltip>
<Tooltip content="Left tooltip" position="left">
<Button>Left</Button>
</Tooltip>
<Tooltip content="Right tooltip" position="right">
<Button>Right</Button>
</Tooltip>Click Trigger
import { Tooltip } from 'beacon-ui';
import { Button } from 'beacon-ui';
<Tooltip content="Click to toggle tooltip" trigger="click">
<Button>Click me</Button>
</Tooltip>Without Arrow
import { Tooltip } from 'beacon-ui';
import { Button } from 'beacon-ui';
<Tooltip content="Tooltip without arrow" showArrow={false}>
<Button>Hover me</Button>
</Tooltip>