Tooltip
Use Tooltips to provide additional contextual information about a particular element or subject.
To add the Tooltip component to your app:
import {Tooltip} from '@stripe/ui-extension-sdk/ui';
This is a preview of two Tooltip components with each type of label:
<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 |
|---|---|
| Required
The contents of the component. |
| Required
The target element that should be used as the Tooltip trigger. |
| Optional
How much time in milliseconds to wait before showing the Tooltip on hover. |
| Optional
How the Tooltip should be placed relative to the trigger element. |
| Optional
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.
<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> <Tooltip placement="right top" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "right top" </Tooltip> <Tooltip placement="right" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "right" </Tooltip> <Tooltip placement="right bottom" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "right bottom" </Tooltip> <Tooltip placement="bottom right" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "bottom right" </Tooltip> <Tooltip placement="bottom" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "bottom" </Tooltip> <Tooltip placement="bottom left" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "bottom left" </Tooltip> <Tooltip placement="left bottom" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "left bottom" </Tooltip> <Tooltip placement="left" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "left" </Tooltip> <Tooltip placement="left top" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "left top" </Tooltip>
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.
<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.
<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>