Tooltip
The Tooltip component displays informative text when users hover over, focus on, or tap an element. It supports positioning, delay, and customizable content.
Default
Tooltip appears after a short delay. Positioned above, below, to the left, and to the right of the element.
Top
Right
Bottom
Left
<Tooltip content="Tooltip on top" position="top"><span>Top</span></Tooltip><Tooltip content="Tooltip on right" position="right"><span>Right</span></Tooltip><Tooltip content="Tooltip on bottom" position="bottom"><span>Bottom</span></Tooltip><Tooltip content="Tooltip on left" position="left"><span>Left</span></Tooltip>No delay
Tooltip appears immediately on hover.
Top
Right
Bottom
Left
<Tooltip content="No delay top" position="top" delay={0}><span>Top</span></Tooltip><Tooltip content="No delay right" position="right" delay={0}><span>Right</span></Tooltip><Tooltip content="No delay bottom" position="bottom" delay={0}><span>Bottom</span></Tooltip><Tooltip content="No delay left" position="left" delay={0}><span>Left</span></Tooltip>Custom content
Tooltip can display rich content using JSX.
Top
Right
Bottom
Left
<Tooltip content={<span><strong>Bold text</strong> and <em>italic</em></span>} position="top">Top</Tooltip><Tooltip content={<span><strong>Bold text</strong> and <em>italic</em></span>} position="right">Right</Tooltip><Tooltip content={<span><strong>Bold text</strong> and <em>italic</em></span>} position="bottom">Bottom</Tooltip><Tooltip content={<span><strong>Bold text</strong> and <em>italic</em></span>} position="left">Left</Tooltip>Accessibility
Tooltips are accessible for keyboard users. They can be activated via Tab and Enter keys. Additionally, screen readers can access the tooltip content with the aria-describedby attribute that associates the tooltip text with the element.