Composant d’infobulle pour les applications Stripe
Utilisez des infobulles pour intégrer des précisions à propos d'un élément ou d'un sujet particulier.
Pour ajouter le composant Tooltip à votre application :
import {Tooltip} from '@stripe/ui-extension-sdk/ui';
Voici un aperçu de deux composants Tooltip avec chaque type de 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>
Les infobulles apparaissent au premier plan lorsqu’un utilisateur survole un élément cible avec sa souris. Utilisez les infobulles pour fournir une information contextuelle supplémentaire à propos d’un élément ou d’un sujet particulier. Vous pouvez utiliser les infobulles comme descriptions ou comme étiquettes.
Évitez d’intégrer du contenu interactif (tel que des liens) à l’intérieur d’une infobulle ; en effet, les personnes qui utilisent un clavier ne pourront pas y accéder.
Propriétés des infobulles
| Propriété | Type |
|---|---|
| Obligatoire
Le contenu du composant. |
| Obligatoire
L’élément cible qui doit être utilisé comme déclencheur du |
| Facultatif
Combien de temps, en millisecondes, attendre avant d’afficher le |
| Facultatif
Emplacement du |
| Facultatif
La variante de style du |
Positionnement
Vous pouvez placer les infobulles dans l’une des quatre directions principales et les aligner plus précisément le long d’un axe secondaire, ce qui donne au total 12 options de placement possibles par rapport au trigger. Le positionnement automatique fait les ajustements nécessaires de manière à ce que l’infobulle reste visible dans la fenêtre d’affichage.
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> )
Délai
Les infobulles ont un court délai d’apparition une fois que leur élément déclencheur a été survolé. Vous pouvez paramétrer le délai d’activation à l’aide de la propriété delay. Les infobulles apparaissent toujours immédiatement après que leur élément déclencheur soit la cible d’un focus clavier.
<Tooltip delay={0} trigger={<Button onPress={undefined}>Immediate</Button>}> I showed up immediately. </Tooltip>
Les infobulles apparaissent immédiatement au survol lorsqu’une autre infobulle est déjà 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>