Stripe Apps の Tooltip コンポーネント
ツールチップを使用して、特定の要素や主題についての文脈に沿った追加情報を提供します。
Tooltip コンポーネントをアプリに追加するには、以下のようにします。
import {Tooltip} from '@stripe/ui-extension-sdk/ui';
以下は、それぞれの label タイプの、2 つの Tooltip コンポーネントのプレビューです。
<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>
ツールチップは、ユーザーが対象要素の上にマウスを合わせたり、フォーカスを当てたりすると表示されるオーバーレイです。ツールチップを使用し、特定の要素や主題に関する文脈上の追加情報を提供します。ツールチップは、説明またはラベルとして使用できます。
Avoid putting any interactive content such as links within a Tooltip, because keyboard users won’t be able to access it.
Tooltip props
| プロパティー | タイプ |
|---|---|
| 必須
コンポーネントのコンテンツ。 |
| 必須
The target element that should be used as the |
| オプション
How much time in milliseconds to wait before showing the |
| オプション
How the |
| オプション
The style variant of the |
配置
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.
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 プロパティを使用して調整できます。トリガー要素がキーボードフォーカスを受ける場合には、ツールチップは直ちに表示されます。
<Tooltip delay={0} trigger={<Button onPress={undefined}>Immediate</Button>}> I showed up immediately. </Tooltip>
他のツールチップがすでにアクティブな状態でマウスを合わせると、ツールチップが直ちに表示されます。
<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>