Coming from Orbiter, you should be aware of the following changes:
positionhas been renamed toplacement. Refer to this sample
Tooltip
Tooltips display additional information upon hover or focus that is contextual, helpful, and nonessential while providing the ability to communicate and give clarity to a user.
A tooltip is a message box displayed when a user hovers over or focuses on an element of the interface. A tooltip is used to provide more information and should be paired with and interaction element. Tooltips should be used sparingly and contain succinct supplementary information. Do not include interactive elements in tooltips; use the Popover component instead.
Usage
Trigger
A tooltip trigger can be anything.
Placement
A tooltip can open at different placements.
Disabled
A tooltip can be disabled.
Custom Trigger
A tooltip trigger can update its appearance based on the isOpen value by using TooltipTriggerContext.
Disabled Trigger
While it is not recommended to add a tooltip to a disabled element, it is possible to do so.
Controlled
The open state can be handled in controlled mode.
Collection Items
Tooltips can be used in Collection items.
Best Practices
Tooltips should:
- Provide useful, additional information or clarification.
- Succinctly describe or expand on the element they point to.
- Not be used to communicate critical information, including errors in forms or other feedback.
- Not contain any links or buttons.
- Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.
Props
Tooltip
triggerRef?
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.
children?
The children of the component.
className?
The CSS className for the element.
style?
The inline style for the element.
TooltipTrigger
placement?
The placement of the element with respect to its anchor element.
Defaults to 'top'.
isDisabled?
Whether the tooltip should be disabled, independent from the trigger.
delay?
The delay time for the tooltip to show up. See guidelines.
Defaults to 1500.
trigger?
By default, opens for both focus and hover. Can be made to open only for focus.
isOpen?
Whether the overlay is open by default (controlled).
defaultOpen?
Whether the overlay is open by default (uncontrolled).
shouldFlip?
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.
containerPadding?
The placement padding that should be applied between the element and its surrounding container.
Defaults to 12.
offset?
The additional offset applied along the main axis between the element and its anchor element.
Defaults to 0.
crossOffset?
The additional offset applied along the cross axis between the element and its anchor element.
Defaults to 0.