> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Balloon

> DingTalk の Balloon コンポーネントの使い方と設定を解説します。ユーザー操作に応じて表示される軽量な補助ヒントの実装方法と、プロパティ設定の詳細を紹介します。

## 使用場面

* ユーザーが対象オブジェクト（テキスト、画像、入力フィールドなど）を操作した際に、その操作に応じて補助ヒントやヘルプを表示する場合。

## コンポーネント例

## コンポーネントプロパティ

| プロパティ                   | 説明                                                                      | タイプ                                                                                        | デフォルト            |
| ----------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ---------------- |
| `TYPE`                  | バルーンのタイプを設定します。**tooltip** に設定した場合、テキストが直接表示されます。                       | `'balloon' \| 'tooltip'`                                                                   | `'balloon'`      |
| `afterClose`            | Balloon オーバーレイが閉じた後にトリガーされるイベント。アニメーションが適用されている場合は、アニメーション終了後にトリガーされます。 | `() => void`                                                                               | -                |
| `align`                 | バルーンオーバーレイの表示位置。                                                        | `'t' \| 'b' \| 'l' \| 'r' \| 'tl' \| 'tr' \| 'bl' \| 'br' \| 'lt' \| 'lb' \| 'rt' \| 'rb'` | `'b'`            |
| `balloonOverlayVisible` | デザイナーでオーバーレイを表示するかどうか。本設定はデザイナーでのみ有効です。                                 | `boolean`                                                                                  | `true`           |
| `closable`              | 閉じるボタンを表示するかどうか。                                                        | `boolean`                                                                                  | `true`           |
| `content`               | バルーンコンポーネントに表示するコンテンツ。                                                  | `string`                                                                                   | `'ヒントコンテンツ'`     |
| `defaultVisible`        | 初期化時にコンポーネントを表示するかどうか。                                                  | `boolean`                                                                                  | `false`          |
| `delay`                 | バルーンが表示されるまでの遅延時間。トリガー種類が hover の場合にのみ有効です。単位：ms。                       | `number`                                                                                   | `0`              |
| `display`               | トリガー要素が占めるスペースを設定します。                                                   | `'inline-block' \| 'block'`                                                                | `'inline-block'` |
| `onClose`               | Balloon オーバーレイが閉じたときにトリガーされるイベント。                                       | `() => void`                                                                               | -                |
| `onVisibleChange`       | Balloon オーバーレイが閉じた後にトリガーされるイベント。アニメーションが適用されている場合は、アニメーション終了後にトリガーされます。 | `(visible: boolean) => void`                                                               | -                |
| `overlayMaxWidth`       | オーバーレイの最大幅を制御します。**'initial'** は幅制限なしを意味します。                            | `string`                                                                                   | `'300px'`        |
| `triggerType`           | バルーンコンポーネントのトリガー条件を制御します。                                               | `'hover' \| 'click' \| 'focus'`                                                            | `'click'`        |
| `type`                  | バルーンのスタイルタイプ。                                                           | `'normal' \| 'primary'`                                                                    | `'normal'`       |