Anatomy
Note: Image is not to scale
- Content Container
- Arrow
Options
Positioning
The tooltip can be positioned top, left, right, and bottom with each having ability to position at the start, or end of the content container.
Note: This option sets the preferred position of the tooltip to render against when open. Will be reveresed when collisions occur with other elements.
Density
There are two options for the property density: compact and default.
Offset
The option offset can use any spacing token to offset its position from the origin point of the tooltip. The default offset is the spacing token 025.
Behavior
Avoids collisions
When appropriate, helper text should be placed closest to the Legend.
Guidance
Do not hide content
A tooltip is not meant to hide necessary contextual information. It should only be used as a supplementary element. The nautre of a tooltip is non-persistent and should not require users to discover content within a tooltip.
Avoid nesting actionable elements
The nautre of the tooltip is non-persistent. When the user is required to take an action on an element nested inside the tooltip it makes the action less accessible for those with limited mobility.
Do not nest Popovers or Tooltips
Tooltips should not have additional tooltips or popover within the same container.
Accessibility
Design considerations
While tooltips are a convenient way of revealing content, please keep in mind the nautre of a tooltip and how it shows/hides on hover. consider alternatives like a more persistent element like a popover.
Keyboard controls
Tooltips will show/hide without delay when the trigger is in focus and tab is selected on the keyboard. If the tooltip is open and either escape, space, or enter is selected on the keyboard, it will close the tooltip.
API Reference
TooltipContent
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| density | Two options of density to specify the padding for the inner components. Default + compact | enum compact | ---- | False |
| aria-label | A more descriptive label for accessibility purpose | string | ---- | False |
| asChild | enum boolean | ---- | False | |
| side | enum bottom | left | right | top | TOOLTIP_CONTENT_SIDE.top | False | |
| sideOffset | number & WPDSThemeSpaceObject | theme.space[025] | False | |
| align | enum center | end | start | TOOLTIP_CONTENT_ALIGN.center | False | |
| alignOffset | number | ---- | False | |
| arrowPadding | number | ---- | False | |
| collisionBoundary | enum Element | Element[] | ---- | False | |
| collisionPadding | enum number | Partial<Record<bottom | left | right | top, number>> | ---- | False | |
| sticky | enum always | partial | ---- | False | |
| hideWhenDetached | enum boolean | ---- | False | |
| avoidCollisions | enum boolean | ---- | False | |
| disabled | Prevent the tooltip from showing up | enum boolean | false | False |
| forceMount | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | true | ---- | False |
| onEscapeKeyDown | Event handler called when the escape key is down. Can be prevented. | (event: KeyboardEvent) => void | ---- | False |
| onPointerDownOutside | Event handler called when the a `pointerdown` event happens outside of the `Tooltip`. Can be prevented. | (event: PointerDownOutsideEvent) => void | ---- | False |