Tooltip API
Wrap any element; the tooltip shows above it on hover with the dark gradient surface, green top border, and a caret you can position left, center (default), or right.
<Tooltip content="Determines your cashback rate">
<span className="underline decoration-dotted">Total Balance</span>
</Tooltip>
<Tooltip content="Available to spend right now" caret="left">
<Button variant="tertiary" size="sm">Hover me</Button>
</Tooltip>
<Tooltip content="Pinned to the right edge" caret="right">
<Button variant="tertiary" size="sm">Hover me</Button>
</Tooltip>