Tooltip

Use this component to explain the function or action of an interactive element. They are revealed through hover and focus.


Examples


border
color
layout
padding
typography
shadow
Learn More
as
string
Element nape to render the tooltip activator as
id
string
Required
The ID of the tooltip container
content
React node
The content of the tooltip
disabled
bool
Required
Prevents the tooltip from activating
active
bool
To be removed, not used
left
bool
Causes the tooltip to render right aligned with the trigger so the content overflows left
right
bool
default: true
Causes the tooltip to render left aligned with the trigger so the content overflows right
top
bool
Causes the tooltip to render above the trigger
bottom
bool
default: true
Causes the tooltip to render below the trigger
horizontalOffset
string
default: 0px
Horizontally offset the tooltip content
forcePosition
string
default: false
Disables automatic positioning
children
React node
The children of the tooltip
portalId
string
Element ID for the portal that will house tooltips. Appends to body if not provided.