# Balloon

@include 'common'

## 何时使用

当用户与被说明对象（文字，图片，输入框等）发生交互行为的 action 开始时, 即刻跟随动作出现一种辅助或帮助的提示信息。

其中 Balloon.Tooltip 是简化版本，主要用于 hover 时显示简单文案，如果想让内容可被点击 可以设置<Balloon.Tootip delay={100} />

## 如何使用

对于 trigger 是自定义的 React Component 的情况，自定义的 React Component 需要透传 onMouseEnter/onMouseLeave/onClick 事件。

若要使用无障碍的气泡提示，请传入 id。推荐简单提示使用<Tooltip>、复杂交互使用<Balloon triggerType="click"> 。 triggerType="focus"作为辅助状态用于组件内部，请用户不要直接使用此值。

## 展示

### Tooltip

单行 tooltip：简化的 Balloon, 只能设置 align, trigger 和 children, 触发条件是 hover。不可关闭。
@include 'demo1'

### Tooltip

多行 tooltip：一般用于文字超长溢出等场景；
@include 'demo2'

### popup 基本气泡使用

用于展示提示信息，鼠标悬浮或聚焦时触发提示，鼠标离开提示隐藏；
@include 'demo3'

### 带 title 的气泡

@include 'demo4'

### 带行动的气泡

@include 'demo5'

### 三种触发方式

@include 'demo6'

### 边缘对齐设置

位置有十二个方向。可以通过设置 needAdjust 让气泡被遮盖的情况下，选择合适的位置。
@include 'demo7'

### 从浮层内关闭, 事件回调

使用 visible ,属性控制浮层显示, 使 balloon 变为受限组件。
@include 'demo8'

### close 按钮事件，手动控制 visible

使用 visible,属性控制浮层显示, 使 balloon 变为受限组件。
@include 'demo9'

### 嵌套浮层问题

浮层中如果又有浮层，比如在 Balloon 中有 DatePicker/Select 的浮层, DatePicker 选择时，Balloon 浮层也会关闭。可以用 followTrigger 解决。
@include 'demo10'

### 无障碍支持

弹层 id, 传入值才会支持无障碍。
@include 'demo11'