# Stripe Apps の Tooltip コンポーネント

ツールチップを使用して、特定の要素や主題についての文脈に沿った追加情報を提供します。

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/tooltip?app-sdk-version=8.

`Tooltip` コンポーネントをアプリに追加するには、以下のようにします。

```js
import {Tooltip} from '@stripe/ui-extension-sdk/ui';
```

以下は、それぞれの `label` タイプの、2 つの `Tooltip` コンポーネントのプレビューです。

ツールチップは、ユーザーが対象要素の上にマウスを合わせたり、フォーカスを当てたりすると表示されるオーバーレイです。ツールチップを使用し、特定の要素や主題に関する文脈上の追加情報を提供します。ツールチップは、**説明**または**ラベル**として使用できます。

キーボードユーザーがアクセスすることができないため、ツールチップ内にリンクなどのインタラクティブなコンテンツは含めないでください。

### Tooltip プロパティ

| プロパティー      | タイプ                                                                                                                                                                                                                                                                                                                                                             |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`  | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                                                                                                                                                                                                                                                                                                                      |
| `trigger`   | (必須)
  `React.ReactElement`

  `Tooltip` のトリガーとして使用するターゲット要素。                                                                                                                                                                                                                                                                                                   |
| `delay`     | (オプション)
  `number | undefined`

  マウスのカーソルを合わせたときに `Tooltip` が表示されるまでの待機時間をミリ秒単位で指定します。                                                                                                                                                                                                                                                                         |
| `placement` | (オプション)
  `("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`

  トリガーエレメントを基準にした `Tooltip` の配置方法。 |
| `type`      | (オプション)
  `("label" | "description") | undefined`

  `Tooltip` のスタイルバリアント。                                                                                                                                                                                                                                                                                      |

## 配置

ツールチップは、4 つの主な方向のいずれかに配置でき、2 次的な軸に沿ってさらに調整できるため、`trigger` に対して合計 12 の配置オプションが得られます。ツールチップがビューポート内に表示されるように、必要に応じて配置は自動的に調整されます。

## 遅延

トリガー要素の上にマウスを合わせてからツールチップが表示されるまでには、短い遅延時間があります。このときにツールチップが表示されるまでの時間は、`delay` プロパティを使用して調整できます。トリガー要素がキーボードフォーカスを受ける場合には、ツールチップは直ちに表示されます。

他のツールチップがすでにアクティブな状態でマウスを合わせると、ツールチップが直ちに表示されます。


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/tooltip?app-sdk-version=9.

`Tooltip` コンポーネントをアプリに追加するには、以下のようにします。

```js
import {Tooltip} from '@stripe/ui-extension-sdk/ui';
```

以下は、それぞれの `label` タイプの、2 つの `Tooltip` コンポーネントのプレビューです。

ツールチップは、ユーザーが対象要素の上にマウスを合わせたり、フォーカスを当てたりすると表示されるオーバーレイです。ツールチップを使用し、特定の要素や主題に関する文脈上の追加情報を提供します。ツールチップは、**説明**または**ラベル**として使用できます。

キーボードユーザーがアクセスすることができないため、ツールチップ内にリンクなどのインタラクティブなコンテンツは含めないでください。

### Tooltip プロパティ

| プロパティー      | タイプ                                                                                                                                                                                                                                                                                                                                                             |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`  | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                                                                                                                                                                                                                                                                                                                      |
| `trigger`   | (必須)
  `React.ReactElement`

  `Tooltip` のトリガーとして使用するターゲット要素。                                                                                                                                                                                                                                                                                                   |
| `delay`     | (オプション)
  `number | undefined`

  マウスのカーソルを合わせたときに `Tooltip` が表示されるまでの待機時間をミリ秒単位で指定します。                                                                                                                                                                                                                                                                         |
| `placement` | (オプション)
  `("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`

  トリガーエレメントを基準にした `Tooltip` の配置方法。 |
| `type`      | (オプション)
  `("label" | "description") | undefined`

  `Tooltip` のスタイルバリアント。                                                                                                                                                                                                                                                                                      |

## 配置

ツールチップは、4 つの主な方向のいずれかに配置でき、2 次的な軸に沿ってさらに調整できるため、`trigger` に対して合計 12 の配置オプションが得られます。ツールチップがビューポート内に表示されるように、必要に応じて配置は自動的に調整されます。

## 遅延

トリガー要素の上にマウスを合わせてからツールチップが表示されるまでには、短い遅延時間があります。このときにツールチップが表示されるまでの時間は、`delay` プロパティを使用して調整できます。トリガー要素がキーボードフォーカスを受ける場合には、ツールチップは直ちに表示されます。

他のツールチップがすでにアクティブな状態でマウスを合わせると、ツールチップが直ちに表示されます。


## See also

- [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md)
- [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md)
- [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)