> ## 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

> Documentation for the Balloon component, including use cases, property configuration, and examples. It provides lightweight auxiliary tips that appear in response to user interactions with page elements.

## When to Use

* When a user interacts with the target object (text, image, input field, etc.), an auxiliary or help tip appears immediately after the action.

## Component Example

## Component Properties

| Property                | Description                                                                                                      | Type                                                                                       | Default          |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ---------------- |
| `TYPE`                  | Sets the balloon type. When set to **tooltip**, the text is displayed directly.                                  | `'balloon' \| 'tooltip'`                                                                   | `'balloon'`      |
| `afterClose`            | Event triggered after the Balloon overlay closes. If an animation is applied, it fires after the animation ends. | `() => void`                                                                               | -                |
| `align`                 | Display position of the balloon overlay.                                                                         | `'t' \| 'b' \| 'l' \| 'r' \| 'tl' \| 'tr' \| 'bl' \| 'br' \| 'lt' \| 'lb' \| 'rt' \| 'rb'` | `'b'`            |
| `balloonOverlayVisible` | Whether to display the overlay in the designer. This setting takes effect only in the designer.                  | `boolean`                                                                                  | `true`           |
| `closable`              | Whether to display the close button.                                                                             | `boolean`                                                                                  | `true`           |
| `content`               | Content displayed by the balloon component.                                                                      | `string`                                                                                   | `'Tip content'`  |
| `defaultVisible`        | Whether the component is visible on initialization.                                                              | `boolean`                                                                                  | `false`          |
| `delay`                 | Delay before the balloon appears. Takes effect only when the trigger type is hover. Unit: ms.                    | `number`                                                                                   | `0`              |
| `display`               | Configures the space occupied by the trigger element.                                                            | `'inline-block' \| 'block'`                                                                | `'inline-block'` |
| `onClose`               | Event triggered when the Balloon overlay closes.                                                                 | `() => void`                                                                               | -                |
| `onVisibleChange`       | Event triggered after the Balloon overlay closes. If an animation is applied, it fires after the animation ends. | `(visible: boolean) => void`                                                               | -                |
| `overlayMaxWidth`       | Controls the maximum width of the overlay. **'initial'** means no width limit.                                   | `string`                                                                                   | `'300px'`        |
| `triggerType`           | Controls the trigger condition for the balloon component.                                                        | `'hover' \| 'click' \| 'focus'`                                                            | `'click'`        |
| `type`                  | Style type of the balloon.                                                                                       | `'normal' \| 'primary'`                                                                    | `'normal'`       |