# Bubble 气泡

提供气泡形状的内容展示。简单的文字提示请考虑使用 `Tooltip` 组件

## 注意

请确保 `Bubble` 的子元素可以接受相应触发事件，如 `onMouseEnter`、`onMouseLeave`、`onClick`、`onFocus` 等。

## 使用示例

<!-- <Half> -->

### 基本用法

基本使用场景：用于图标、按钮、操作等的解释说明。

[Example: BubbleExample](./_example/BubbleExample.jsx)

### 出现时机

Bubble 默认是在鼠标 Hover 的时候出现，可以设置为点击 (trigger="click") 或者获得焦点 (trigger="focus") 时出现。

[Example: BubbleTriggerExample](./_example/BubbleTriggerExample.jsx)

### 出现位置

支持 12 个放置方位，来定义出现位置：

[Example: BubblePlacementExample](./_example/BubblePlacementExample.jsx)

### 气泡内容

如无需气泡弹出交互，只渲染气泡内容，改用 `BubbleContent` 组件：

[Example: BubbleContentExample](./_example/BubbleContentExample.jsx)

<!-- </Half> -->

## 组件属性

[Interface: BubbleProps](./Bubble.tsx)

[Interface: BubbleContentProps](./BubbleContent.tsx)

<!-- ## 与 Tooltip 区分

关于 Tooltip 和 Bubble 使用场景上的差异，请参考[此文档](https://git.code.oa.com/CFETeam/tea2/tree/master/tea-component/doc/tooltip-vs-bubble.md)。

## 从 v1 升级

- 默认使用无需包裹 BubbleWrapper，直接使用 Bubble 即可
- focusPosition 和 focusOffset 统一改成通过 placement 来控制 -->