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.
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.
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.