WPDS - Tooltip | Components

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.


Open in Playroom

Density

There are two options for the property density: compact and default.


Open in Playroom

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.


Open in Playroom

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.


Open in Playroom

Do not nest Popovers or Tooltips

Tooltips should not have additional tooltips or popover within the same container.


Open in Playroom

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

TooltipRoot

Prop	Description	Type	Default	Required
open		enum boolean	----	False
defaultOpen		enum boolean	----	False
onOpenChange		(open: boolean) => void	----	False
delayDuration	The duration from when the pointer enters the trigger until the tooltip gets opened. This will override the prop with the same name passed to Provider. @defaultValue 700	number	----	False
disableHoverableContent	When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger. @defaultValue false	enum boolean	----	False

TooltipPortal

Prop	Description	Type	Default	Required
forceMount	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.	true	----	False
container		HTMLElement	----	False

TooltipProvider

Prop	Description	Type	Default	Required
delayDuration	The duration from when the pointer enters the trigger until the tooltip gets opened. @defaultValue 700	number	----	False
skipDelayDuration	How much time a user has to enter another trigger without incurring a delay again. @defaultValue 300	number	----	False
disableHoverableContent	When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger. @defaultValue false	enum boolean	----	False

Tooltip

Prop	Description	Type	Default	Required

TooltipContent

Prop	Description	Type	Default	Required
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	CSS	----	False
disabled	Prevent the tooltip from showing up	enum boolean	false	False
offsetSide		enum string \| number \| WPDSThemeSpaceObject	theme.space[025]	False
side		enum bottom \| left \| right \| top	top	False
align		enum center \| end \| start	center	False
offsetAlign		enum string \| number \| WPDSThemeSpaceObject	0	False
forceMount	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.	true	----	False
aria-label	A more descriptive label for accessibility purpose	string	----	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
asChild		enum boolean	----	False
sideOffset		number	----	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
density	Specify the amount of padding for the inner components.	enum compact \| default	----	False

TooltipTrigger

Prop	Description	Type	Default	Required
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	CSS	----	False
asChild		enum boolean	----	False