Homecomponentsinformational
Tooltip
A hidden, summonable way to provide explanations.
Use Tooltip to show brief, informative message when a user interacts with an element.
Content
Use the content property to set the informative text.
Disabled
Use the disabled property to turn off user interaction with an element.
Position
Use the placement property to control the side of the text appearance.
Left
Top
Bottom
Right
Delay
Use the delay property to control the time before the tooltip appears.
No Delay
Short Delay
Long Delay
Alignment
Use the align property to align the content arrow against the tooltip trigger.
Top Start
Top Center
Top End
Left Start
Left Center
Left End
Right Start
Right Center
Right End
Bottom Start
Bottom Center
Bottom End
Text wrapping
The tooltip will wrap long text automatically.
API
content
Required
string
children
ReactElement<any, string | JSXElementConstructor<any>>
placement
bottom
left
right
top
delay
instant
short
long
align
center
end
start
disabled
true
false
data
DataAttributeMap