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>
ツールチップは、ユーザーが対象要素の上にマウスを合わせたり、フォーカスを当てたりすると表示されるオーバーレイです。ツールチップを使用し、特定の要素や主題に関する文脈上の追加情報を提供します。ツールチップは、説明またはラベルとして使用できます。
キーボードユーザーがアクセスすることができないため、ツールチップ内にリンクなどのインタラクティブなコンテンツは含めないでください。
Tooltip プロパティ
| プロパティー | タイプ |
|---|---|
| 必須
コンポーネントのコンテンツ。 |
| 必須
|
| オプション
マウスのカーソルを合わせたときに |
| オプション
トリガーエレメントを基準にした |
| オプション
|
配置
ツールチップは、4 つの主な方向のいずれかに配置でき、2 次的な軸に沿ってさらに調整できるため、trigger に対して合計 12 の配置オプションが得られます。ツールチップがビューポート内に表示されるように、必要に応じて配置は自動的に調整されます。
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>