Skip to main contentCarbon Design System

Tooltip

Preview the tooltip component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

Live demo

<Tooltip
direction="bottom"
tabIndex={0}
triggerText="Tooltip label"
>
<p>
This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead.
</p>
<div className="cds--tooltip__footer">
<Link href="#">Learn more</Link>
<Button size="small">
Create
</Button>
</div>
</Tooltip>