Tooltip component for Stripe Apps
Use Tooltips to provide additional contextual information about a particular element or subject.
SDK version
To add the Tooltip component to your app:
This is a preview of two Tooltip components with each type of label:
Loading example...
<Tooltip
type="description"
trigger={
<Button type="primary" disabled onPress={undefined}>
Pay out to bank
</Button>
}
>
You have no available balance to pay out. You can create payouts when
you've accumulated a positive balance again.
</Tooltip>
<Tooltip
type="label"
trigger={
<Button onPress={undefined}>
<Icon name="notifications" />
</Button>
}
>
Notifications
</Tooltip>
Tooltips are overlays that appear when a user hovers or focuses a target element. Use Tooltips to provide additional contextual information about a particular element or subject. You can use tooltips as either descriptions or labels.
Avoid putting any interactive content such as links within a Tooltip, because keyboard users won’t be able to access it.
Tooltip props
| Property | Type |
|---|---|
children | Required React.ReactNode The contents of the component. |
trigger | Required React.ReactElement The target element that should be used as the Tooltip trigger. |
delay | Optional number | undefined How much time in milliseconds to wait before showing the Tooltip on hover. |
placement | Optional ("bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom") | undefined How the Tooltip should be placed relative to the trigger element. |
type | Optional ("label" | "description") | undefined The style variant of the Tooltip. |
Placement
You can place tooltips in one of four primary directions and further align them along a secondary axis, resulting in a total of 12 possible placement options relative to the trigger. The placement automatically adjusts as necessary to ensure the Tooltip remains visible within the viewport.
Loading example...
const SpacerComponent = () => <Box css={{width: 28, height: 28}}>{null}</Box>;
const Row = ({children}: {children: React.ReactNode}) => (
<Box
css={{
stack: 'x',
wrap: 'wrap',
gap: 'small',
distribute: 'space-between',
}}
>
{children}
</Box>
);
return (
<Box
css={{
padding: 'xxlarge',
stack: 'y',
}}
>
<Row>
<SpacerComponent />
<Tooltip
placement="top left"
trigger={
<Button onPress={undefined}>
<Icon name="info" />
</Button>
}
>
"top left"
</Tooltip>
<Tooltip
placement="top"
trigger={
<Button onPress={undefined}>
<Icon name="info" />
</Button>
}
>
"top"
</Tooltip>
<Tooltip
placement="top right"
trigger={
<Button onPress={undefined}>
<Icon name="info" />
</Button>
}
>
"top right"
</Tooltip>
<SpacerComponent />
</Row>
<Row>
<Tooltip
placement="left top"
trigger={
<Button onPress={undefined}>
<Icon name="info" />
</Button>
}
>
"left top"
</Tooltip>
<SpacerComponent />
<SpacerComponent />
<SpacerComponent />
<Tooltip
placement="right top"
trigger={
<Button onPress={undefined}>
<Icon name="info" />
</Button>
}
>
"right top"
</Tooltip>
</Row>
<Row>
<Tooltip
placement="left"
trigger={
<Button onPress={undefined}>
<Icon name="info" />
</Button>
}
>
"left"
</Tooltip>
<SpacerComponent />
<SpacerComponent />
<SpacerComponent />
<Tooltip
placement="right"
trigger={
<Button onPress={undefined}>
<Icon name="info" />
</Button>
}
>
"right"
</Tooltip>
</Row>
<Row>
<Tooltip
placement="left bottom"
trigger={
<Button onPress={undefined}>
<Icon name="info" />
</Button>
}
>
"left bottom"
</Tooltip>
<SpacerComponent />
<SpacerComponent />
<SpacerComponent />
<Tooltip
placement="right bottom"
trigger={
<Button onPress={undefined}>
<Icon name="info" />
</Button>
}
>
"right bottom"
</Tooltip>
</Row>
<Row>
<SpacerComponent />
<Tooltip
placement="bottom left"
trigger={
<Button onPress={undefined}>
<Icon name="info" />
</Button>
}
>
"bottom left"
</Tooltip>
<Tooltip
placement="bottom"
trigger={
<Button onPress={undefined}>
<Icon name="info" />
</Button>
}
>
"bottom"
</Tooltip>
<Tooltip
placement="bottom right"
trigger={
<Button onPress={undefined}>
<Icon name="info" />
</Button>
}
>
"bottom right"
</Tooltip>
<SpacerComponent />
</Row>
</Box>
)
Delay
Tooltips have a short delay for when they appear after hovering over their trigger element. You can control the amount of time it takes for a Tooltip to become active on hover using the delay prop. Tooltips always appear immediately when their trigger element receives keyboard focus.
Loading example...
<Tooltip delay={0} trigger={<Button onPress={undefined}>Immediate</Button>}>
I showed up immediately.
</Tooltip>
Tooltips appear immediately on hover while another Tooltip is already active.
Loading example...
<Tooltip trigger={<Button onPress={undefined}>Hover me</Button>}>
I showed up after a delay.
</Tooltip>
<Tooltip trigger={<Button onPress={undefined}>Then me</Button>}>
I showed up immediately.
</Tooltip>