Marigold
Getting StartedFoundationsComponentsPatternsRecipesReleases
Discover new Tutorials!

Components

Overview

Application

MarigoldProvider
updated
RouterProvider
updated

Layout

Aside
Aspect
Breakout
Center
Columns
Container
Grid
Inline
Inset
Scrollable
Split
Stack
updated
Tiles

Form

Autocomplete
Button
updated
Calendar
Checkbox
ComboBox
DateField
DatePicker
Form
Multiselect
new
NumberField
Radio
SearchField
Select
Slider
Switch
TextArea
TextField
TimeField
new

Collection

SelectList
updated
Table
updated
Tag

Navigation

Accordion
Breadcrumbs
beta
Pagination
Tabs

Overlay

ContextualHelp
new
Dialog
Menu
Toast
beta
Tooltip
updated

Content

Badge
Body
Card
Divider
updated
Footer
Header
Headline
updated
Icon
updated
Image
Link
updated
List
updated
SectionMessage
SVG
updated
Text
updated
VisuallyHidden
updated
XLoader

Formatters

DateFormat
NumericFormat

Hooks and Utils

cn
cva
extendTheme
useAsyncListData
useListData
useResponsiveValue
useTheme

Tooltip

Component for displaying short information.

The <Tooltip> component offers users short, contextual hints when they hover or focus on specific UI elements. It displays a hint alongside the referenced element, working together to unobtrusively clarify elements in the interface. It’s ideal for brief, passive help that doesn’t require interaction or persistent visibility.

Anatomy

Anatomy of tooltip
  • Trigger: Indicator that can be activated on hover or focus.
  • Caret tip: Closely associates the tooltip to term to be defined.
  • Tooltip: Holds the informative text or message.

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

Variant
Size
The selected theme does not has any options for "size".
PropertyTypeDescription
variantdefault | whiteThe available variants of this component.
size-The available sizes of this component.

Usage

Tooltips are best used to provide concise, supportive information for UI elements that may need clarification. They should be brief, non-essential, and avoid disrupting the flow of interaction. Use them to explain unfamiliar icons, edge cases, or provide hints that help users without cluttering the interface.

Icons without visible labels can be unclear, especially for less familiar actions. A tooltip offers quick, contextual clarification by revealing the icon’s purpose on hover or focus. For example, a tooltip might clarify that an icon represents "Download as PDF" when the label is not visible.

Preview
Code

Avoid using tooltips for critical information, long explanations, or interactive content. If users need persistent guidance, longer descriptions, or help while interacting with a task, consider components like contextual help, the help text of a form fields, or a message displayed inline. These patterns are better suited for complex or essential information that should not disappear when the user moves their cursor.

Do

Use tooltips to explain icons without a label or to describe uncommon behavior.

Don't

Don't use tooltips if the information is essential to complete a task.

Show on focus

Tooltips can also appear when an element receives keyboard focus, not just on hover. This ensures that users who navigate via keyboard or assistive technologies receive the same helpful information as mouse users.

Use focus-triggered tooltips to improve accessibility, especially for icon-only buttons, form controls, or compact layouts where context is not visually obvious. It’s particularly helpful when the tooltip content clarifies the purpose of an element that lacks a label or descriptive text.

To enable this behavior, set the trigger prop on <Tooltip.Trigger> to "focus".

Preview
Code

Accessibility

You do not need to set aria-describedby manually because the <Tooltip> component sets it for you. However, if the button contains only an image or icon such as an SVG, make sure to provide an aria-label on the button for screen readers, and consider setting aria-hidden="true" on the image to avoid redundant announcements.

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
View Tooltip stories

Tooltip

UNSTABLE_portalContainer?
Element;
The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.
Defaults to: 
"document.body"
aria-describedby?
string;
Identifies the element (or elements) that describes the object.
aria-details?
string;
Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label?
string;
Defines a string value that labels the current element.
aria-labelledby?
string;
Identifies the element (or elements) that labels the current element.
arrowBoundaryOffset?
number;
The minimum distance the arrow's edge should be from the edge of the overlay element.
Defaults to: 
0
children?
ReactNode;
The children of the component.
containerPadding?
number;
The placement padding that should be applied between the element and its surrounding container.
Defaults to: 
12
crossOffset?
number;
The additional offset applied along the cross axis between the element and its anchor element.
Defaults to: 
0
defaultOpen?
boolean;
Whether the overlay is open by default (uncontrolled).
dir?
string;
hidden?
boolean;
inert?
boolean;
isEntering?
boolean;
Whether the tooltip is currently performing an entry animation.
isExiting?
boolean;
Whether the tooltip is currently performing an exit animation.
lang?
string;
offset?
number;
The additional offset applied along the main axis between the element and its anchor element.
Defaults to: 
0
onAnimationEnd?
AnimationEventHandler<HTMLDivElement>;
onAnimationEndCapture?
AnimationEventHandler<HTMLDivElement>;
onAnimationIteration?
AnimationEventHandler<HTMLDivElement>;
onAnimationIterationCapture?
AnimationEventHandler<HTMLDivElement>;
onAnimationStart?
AnimationEventHandler<HTMLDivElement>;
onAnimationStartCapture?
AnimationEventHandler<HTMLDivElement>;
onAuxClick?
MouseEventHandler<HTMLDivElement>;
onAuxClickCapture?
MouseEventHandler<HTMLDivElement>;
onClick?
MouseEventHandler<HTMLDivElement>;
onClickCapture?
MouseEventHandler<HTMLDivElement>;
onContextMenu?
MouseEventHandler<HTMLDivElement>;
onContextMenuCapture?
MouseEventHandler<HTMLDivElement>;
onDoubleClick?
MouseEventHandler<HTMLDivElement>;
onDoubleClickCapture?
MouseEventHandler<HTMLDivElement>;
onGotPointerCapture?
PointerEventHandler<HTMLDivElement>;
onGotPointerCaptureCapture?
PointerEventHandler<HTMLDivElement>;
onLostPointerCapture?
PointerEventHandler<HTMLDivElement>;
onLostPointerCaptureCapture?
PointerEventHandler<HTMLDivElement>;
onMouseDown?
MouseEventHandler<HTMLDivElement>;
onMouseDownCapture?
MouseEventHandler<HTMLDivElement>;
onMouseEnter?
MouseEventHandler<HTMLDivElement>;
onMouseLeave?
MouseEventHandler<HTMLDivElement>;
onMouseMove?
MouseEventHandler<HTMLDivElement>;
onMouseMoveCapture?
MouseEventHandler<HTMLDivElement>;
onMouseOut?
MouseEventHandler<HTMLDivElement>;
onMouseOutCapture?
MouseEventHandler<HTMLDivElement>;
onMouseOver?
MouseEventHandler<HTMLDivElement>;
onMouseOverCapture?
MouseEventHandler<HTMLDivElement>;
onMouseUp?
MouseEventHandler<HTMLDivElement>;
onMouseUpCapture?
MouseEventHandler<HTMLDivElement>;
onOpenChange?
(isOpen: boolean) => void;
Handler that is called when the overlay's open state changes.
onPointerCancel?
PointerEventHandler<HTMLDivElement>;
onPointerCancelCapture?
PointerEventHandler<HTMLDivElement>;
onPointerDown?
PointerEventHandler<HTMLDivElement>;
onPointerDownCapture?
PointerEventHandler<HTMLDivElement>;
onPointerEnter?
PointerEventHandler<HTMLDivElement>;
onPointerLeave?
PointerEventHandler<HTMLDivElement>;
onPointerMove?
PointerEventHandler<HTMLDivElement>;
onPointerMoveCapture?
PointerEventHandler<HTMLDivElement>;
onPointerOut?
PointerEventHandler<HTMLDivElement>;
onPointerOutCapture?
PointerEventHandler<HTMLDivElement>;
onPointerOver?
PointerEventHandler<HTMLDivElement>;
onPointerOverCapture?
PointerEventHandler<HTMLDivElement>;
onPointerUp?
PointerEventHandler<HTMLDivElement>;
onPointerUpCapture?
PointerEventHandler<HTMLDivElement>;
onScroll?
UIEventHandler<HTMLDivElement>;
onScrollCapture?
UIEventHandler<HTMLDivElement>;
onTouchCancel?
TouchEventHandler<HTMLDivElement>;
onTouchCancelCapture?
TouchEventHandler<HTMLDivElement>;
onTouchEnd?
TouchEventHandler<HTMLDivElement>;
onTouchEndCapture?
TouchEventHandler<HTMLDivElement>;
onTouchMove?
TouchEventHandler<HTMLDivElement>;
onTouchMoveCapture?
TouchEventHandler<HTMLDivElement>;
onTouchStart?
TouchEventHandler<HTMLDivElement>;
onTouchStartCapture?
TouchEventHandler<HTMLDivElement>;
onTransitionCancel?
TransitionEventHandler<HTMLDivElement>;
onTransitionCancelCapture?
TransitionEventHandler<HTMLDivElement>;
onTransitionEnd?
TransitionEventHandler<HTMLDivElement>;
onTransitionEndCapture?
TransitionEventHandler<HTMLDivElement>;
onTransitionRun?
TransitionEventHandler<HTMLDivElement>;
onTransitionRunCapture?
TransitionEventHandler<HTMLDivElement>;
onTransitionStart?
TransitionEventHandler<HTMLDivElement>;
onTransitionStartCapture?
TransitionEventHandler<HTMLDivElement>;
onWheel?
WheelEventHandler<HTMLDivElement>;
onWheelCapture?
WheelEventHandler<HTMLDivElement>;
open?
boolean;
Whether the element is rendered.
placement?
Placement;
The placement of the tooltip with respect to the trigger.
Defaults to: 
'top'
shouldFlip?
boolean;
Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
Defaults to: 
"true"
translate?
"yes" | "no";
triggerRef?
RefObject<Element | null>;
The ref for the element which the tooltip positions itself with respect to. When used within a TooltipTrigger this is set automatically. It is only required when used standalone.

Tooltip.Trigger

children
ReactNode;
The children of the component.
closeDelay?
number;
The delay time for the tooltip to close. See guidelines.
Defaults to: 
500
defaultOpen?
boolean;
Whether the overlay is open by default (uncontrolled).
delay?
number;
The delay time for the tooltip to show up. See guidelines.
Defaults to: 
1000
disabled?
boolean;
Whether the tooltip should be disabled, independent from the trigger.
onOpenChange?
(isOpen: boolean) => void;
Handler that is called when the overlay's open state changes.
open?
boolean;
Control the visibility of the tooltip.
trigger?
"focus";
By default, opens for both focus and hover. Can be made to open only for focus.

Alternative Components

  • ContextualHelp: Use when users need more detailed, persistent guidance near a specific element or task.
  • SectionMessage: Use to highlight important information inline that should remain visible as users read or interact with the page.
Last update: 14 days ago
Build with 🥵, 🧡 and
v14.1.1