BRAID
Braid Logo
Releases
Gallery
Playroom
GitHub
Guides
Design Workflow
Development Workflow
Playroom Prototyping
Contribution
Testing Guide
Foundations
Layout
Tones
Iconography
Examples
Job Summary
Basic Form
Marketing Banner
Components
Accordion
Actions
Alert
Autosuggest
Badge
Bleed
Box
Button
ButtonIcon
New
ButtonLink
Card
Checkbox
Columns
ContentBlock
Dialog
Disclosure
Divider
Drawer
Dropdown
FieldLabel
FieldMessage
Heading
Hidden
HiddenVisually
Inline
List
Loader
MenuItem
MenuItemCheckbox
MenuItemDivider
MenuRenderer
MonthPicker
Notice
OverflowMenu
Pagination
PasswordField
Radio
Deprecated
RadioGroup
Rating
Secondary
Stack
Stepper
Strong
Tabs
Tag
Text
TextDropdown
TextField
TextLink
TextLinkButton
Textarea
Tiles
Toggle
TooltipRenderer
useToast
CSS
vars
atoms
breakpoints
responsiveStyle
globalTextStyle
globalHeadingStyle
Logic
BraidPortal
BraidProvider
BraidTestProvider
Link
ThemeNameConsumer
useBreakpoint
Deprecated
useColor
useResponsiveValue
useSpace
useThemeName
TooltipRenderer
Details
Details
Props
Props
Releases
1
Releases
1
Snippets
Snippets
View code
Code
Open in
Playroom
Accessibility
Follows the
WAI-ARIA Tooltip Pattern.
Tooltips appear on mouse hover, tap and keyboard focus, and are hidden when scrolling and clicking/tapping/focusing on other elements.
Tooltips cannot contain interactive elements like links, buttons or form elements.
Development considerations
The trigger element must support
ref
,
tabIndex
and
aria-describedby
props.
Placement
Tooltips are positioned above the trigger element by default, but you can configure this via the
placement
prop which accepts either
top
or
bottom
.
Whichever direction you choose, the tooltip will be centred against the trigger element.
Top
Bottom
View code
Code
Open in
Playroom
Formatting
To ensure readability, tooltips have a maximum width of 260px, which means that text will wrap onto multiple lines if you provide enough content.
You can also use multiple text elements and layout components to create more custom layouts.
Strong text
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
View code
Code
Open in
Playroom
BRAID
Braid Logo