{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<h3 id=\"When To Use\">When To Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<ul>\n<li>Balloon is used when you hope to show auxiliary or help message during users&apos; interacting with the illustrated object (text, picture, input box, etc.).</li>\n<li>Particularly, Balloon.Tooltip is a simplified Balloon for displaying tip when hovered. If you want the content to be clickable, use <code>&lt;Balloon.Tootip delay={100} /&gt;</code></li>\n</ul>\n<h3 id=\"Note\">Note <a class=\"header-anchor scroll-count-item\" href=\"#Note\" data-scroll-id=\"Note\">#</a></h3>\n<ul>\n<li>When trigger is a custom React Component, it needs to pass through the onMouseEnter/onMouseLeave/onClick callback.</li>\n<li>This Component will be accessible when you pass id. We recommond you <code>&lt;Tooltip&gt;</code> for simple tip, <code>&lt;Balloon triggerType=&quot;click&quot;&gt;</code> for complex usage(e.g.nested with form). Don&apos;t use triggerType=&quot;focus&quot;, it&apos;s for Component internal use only.</li>\n</ul>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Balloon V 2\">Balloon V2 <a class=\"header-anchor scroll-count-item\" href=\"#Balloon V 2\" data-scroll-id=\"Balloon V 2\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n<th>Supported Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>v2</td>\n<td>Enable v2</td>\n<td>true</td>\n<td>-</td>\n<td></td>\n<td>1.25</td>\n</tr>\n<tr>\n<td>children</td>\n<td>Content of popup</td>\n<td>ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>type</td>\n<td>Style type</td>\n<td>&apos;normal&apos; | &apos;primary&apos;</td>\n<td>&apos;normal&apos;</td>\n<td></td>\n<td>1.23</td>\n</tr>\n<tr>\n<td>title</td>\n<td>Title</td>\n<td>ReactNode</td>\n<td>-</td>\n<td></td>\n<td>1.23</td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Popup current display status</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultVisible</td>\n<td>Popup default display status</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>Popup display and hide event<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>visible</em>: Wether the popup is hidden or displayed<br><em>type</em>: Source of trigger popup display or hide, closeClick means triggered by the close button; fromTrigger means triggered by the trigger click; docClick means triggered by the document click</td>\n<td>(visible: boolean, type: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>arrowPointToCenter</td>\n<td>Whether the arrow points to the center of the target element</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>1.25</td>\n</tr>\n<tr>\n<td>placementOffset</td>\n<td>Popup offset</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>closable</td>\n<td>Whether to display close button</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>align</td>\n<td>Position of popup</td>\n<td>AlignType</td>\n<td>&apos;b&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>offset</td>\n<td>Tuning of popup relative to trigger, receive an array [hoz, ver], indicating the offset of the popup on left / top, e.g. [100, 100] means to the right (in RTL mode, it is to the left) and downward offset 100px</td>\n<td>Array&lt;number&gt;</td>\n<td>[0, 0]</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>trigger</td>\n<td>Trigger element</td>\n<td>ReactElement | string</td>\n<td><span></span></td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>triggerType</td>\n<td>Trigger behavior, mouse hover, mouse click (&apos;hover&apos;,&apos;click&apos;) or an array of them, e.g. [&apos;hover&apos;, &apos;click&apos;], strongly not recommended to use &apos;focus&apos;, if the popup content has complex interactions, it is recommended to use click</td>\n<td>&apos;hover&apos; | &apos;click&apos; | &apos;focus&apos; | (&apos;hover&apos; | &apos;click&apos; | &apos;focus&apos;)[]</td>\n<td>&apos;hover&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>Any event triggered when visible is false</td>\n<td>() =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoAdjust</td>\n<td>Whether to perform automatic position adjustment, default automatic opening</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>1.25</td>\n</tr>\n<tr>\n<td>delay</td>\n<td>Popup delay display</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>afterClose</td>\n<td>Popup close event</td>\n<td>() =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoFocus</td>\n<td>Whether to automatically focus to the internal first element</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>safeNode</td>\n<td>Safe node: for the popup with triggerType set to click, the popup will be closed when clicking on other areas other than the popup</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>safeId</td>\n<td>Used to specify the id of the safeNode node, and combined with safeNode</td>\n<td>string</td>\n<td>null</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>animation</td>\n<td>Configure the playback method of the animation, the format is { in: &apos;&apos;, out: &apos;&apos; }, commonly used animation class please see the documentation of the Animate component<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>in</em>: in<br><em>out</em>: out</td>\n<td>string | false | Record&lt;&apos;in&apos; | &apos;out&apos;, string&gt;</td>\n<td>{ in: &apos;zoomIn zoomInBig&apos;, out: &apos;zoomOut zoomOutBig&apos;, }</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>cache</td>\n<td>Whether to delete the dom node of the popup when it is closed</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>Specify the parent node of the floating layer that is rendered, which can be a string of node id, or a function that returns a node</td>\n<td>PopupProps[&apos;container&apos;]</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupStyle</td>\n<td>Popup style</td>\n<td>CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>Popup className</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>Popup props</td>\n<td>ComponentPropsWithRef&lt;typeof Popup&gt;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Follow scrolling</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>id</td>\n<td>Popup id, if passed value will support accessibility</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Balloon V 1\">Balloon V1 <a class=\"header-anchor scroll-count-item\" href=\"#Balloon V 1\" data-scroll-id=\"Balloon V 1\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n<th>Supported Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>v2</td>\n<td>Enable v2</td>\n<td>false | undefined</td>\n<td>-</td>\n<td></td>\n<td>1.25</td>\n</tr>\n<tr>\n<td>children</td>\n<td>Content of popup</td>\n<td>ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>title</td>\n<td>Title</td>\n<td>ReactNode</td>\n<td>-</td>\n<td></td>\n<td>1.23</td>\n</tr>\n<tr>\n<td>type</td>\n<td>Style type</td>\n<td>&apos;normal&apos; | &apos;primary&apos;</td>\n<td>&apos;normal&apos;</td>\n<td></td>\n<td>1.23</td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Popup current display status</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultVisible</td>\n<td>Popup default display status</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>Popup display and hide event<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>visible</em>: Wether the popup is hidden or displayed<br><em>type</em>: Source of trigger popup display or hide, closeClick means triggered by the close button; fromTrigger means triggered by the trigger click; docClick means triggered by the document click</td>\n<td>(visible: boolean, type: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>closable</td>\n<td>Whether to display close button</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>align</td>\n<td>Position of popup</td>\n<td>AlignType</td>\n<td>&apos;b&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>offset</td>\n<td>Tuning of popup relative to trigger, receive an array [hoz, ver], indicating the offset of the popup on left / top, e.g. [100, 100] means to the right (in RTL mode, it is to the left) and downward offset 100px</td>\n<td>Array&lt;number&gt;</td>\n<td>[0, 0]</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>trigger</td>\n<td>Trigger element</td>\n<td>ReactElement | string</td>\n<td><span></span></td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>triggerType</td>\n<td>Trigger behavior, mouse hover, mouse click (&apos;hover&apos;,&apos;click&apos;) or an array of them, e.g. [&apos;hover&apos;, &apos;click&apos;], strongly not recommended to use &apos;focus&apos;, if the popup content has complex interactions, it is recommended to use click</td>\n<td>&apos;hover&apos; | &apos;click&apos; | &apos;focus&apos; | (&apos;hover&apos; | &apos;click&apos; | &apos;focus&apos;)[]</td>\n<td>&apos;hover&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>Any event triggered when visible is false</td>\n<td>() =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>delay</td>\n<td>Popup delay display</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>afterClose</td>\n<td>Popup close event</td>\n<td>() =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoFocus</td>\n<td>Whether to automatically focus to the internal first element</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>safeNode</td>\n<td>Safe node: for the popup with triggerType set to click, the popup will be closed when clicking on other areas other than the popup</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>safeId</td>\n<td>Used to specify the id of the safeNode node, and combined with safeNode</td>\n<td>string</td>\n<td>null</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>animation</td>\n<td>Configure the playback method of the animation, the format is { in: &apos;&apos;, out: &apos;&apos; }, commonly used animation class please see the documentation of the Animate component<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>in</em>: in<br><em>out</em>: out</td>\n<td>string | false | Record&lt;&apos;in&apos; | &apos;out&apos;, string&gt;</td>\n<td>{ in: &apos;zoomIn zoomInBig&apos;, out: &apos;zoomOut zoomOutBig&apos;, }</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>cache</td>\n<td>Whether to delete the dom node of the popup when it is closed</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>Specify the parent node of the floating layer that is rendered, which can be a string of node id, or a function that returns a node</td>\n<td>PopupProps[&apos;container&apos;]</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupStyle</td>\n<td>Popup style</td>\n<td>CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>Popup className</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>Popup props</td>\n<td>ComponentPropsWithRef&lt;typeof Popup&gt;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Follow scrolling</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>id</td>\n<td>Popup id, if passed value will support accessibility</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Balloon Tooltip V 2\">Balloon.Tooltip V2 <a class=\"header-anchor scroll-count-item\" href=\"#Balloon Tooltip V 2\" data-scroll-id=\"Balloon Tooltip V 2\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>v2</td>\n<td>Enable v2</td>\n<td>true</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Content of tooltip</td>\n<td>ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>align</td>\n<td>Position of popup</td>\n<td>AlignType</td>\n<td>&apos;b&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>trigger</td>\n<td>Trigger element</td>\n<td>ReactElement | string</td>\n<td><span></span></td>\n<td></td>\n</tr>\n<tr>\n<td>triggerType</td>\n<td>Trigger behavior, mouse hover, mouse click (&apos;hover&apos;, &apos;click&apos;) or an array of them, e.g. [&apos;hover&apos;, &apos;click&apos;], strongly not recommended to use &apos;focus&apos;, if the popup content has complex interactions, it is recommended to use the Balloon component with triggerType set to click</td>\n<td>&apos;hover&apos; | &apos;click&apos; | &apos;focus&apos; | (&apos;hover&apos; | &apos;click&apos; | &apos;focus&apos;)[]</td>\n<td>&apos;hover&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>popupStyle</td>\n<td>Popup style</td>\n<td>CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>Popup className</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>Popup props</td>\n<td>ComponentPropsWithRef&lt;typeof Popup&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>pure</td>\n<td>Whether to pure render</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>Specify the parent node of the floating layer that is rendered, which can be a string of node id, or a function that returns a node</td>\n<td>PopupProps[&apos;container&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Whether to follow scrolling</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>id</td>\n<td>Popup id, if passed value will support accessibility</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>delay</td>\n<td>If needed, set this parameter to allow the Tooltip content to be clicked, e.g. 100px</td>\n<td>number</td>\n<td>50</td>\n<td></td>\n</tr>\n<tr>\n<td>arrowPointToCenter</td>\n<td>Whether the arrow points to the center of the target element</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Balloon Tooltip V 1\">Balloon.Tooltip V1 <a class=\"header-anchor scroll-count-item\" href=\"#Balloon Tooltip V 1\" data-scroll-id=\"Balloon Tooltip V 1\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>v2</td>\n<td>Enable v2</td>\n<td>false | undefined</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Content of tooltip</td>\n<td>ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>align</td>\n<td>Position of popup</td>\n<td>AlignType</td>\n<td>&apos;b&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>trigger</td>\n<td>Trigger element</td>\n<td>ReactElement | string</td>\n<td><span></span></td>\n<td></td>\n</tr>\n<tr>\n<td>triggerType</td>\n<td>Trigger behavior, mouse hover, mouse click (&apos;hover&apos;, &apos;click&apos;) or an array of them, e.g. [&apos;hover&apos;, &apos;click&apos;], strongly not recommended to use &apos;focus&apos;, if the popup content has complex interactions, it is recommended to use the Balloon component with triggerType set to click</td>\n<td>&apos;hover&apos; | &apos;click&apos; | &apos;focus&apos; | (&apos;hover&apos; | &apos;click&apos; | &apos;focus&apos;)[]</td>\n<td>&apos;hover&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>popupStyle</td>\n<td>Popup style</td>\n<td>CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>Popup className</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>Popup props</td>\n<td>ComponentPropsWithRef&lt;typeof Popup&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>pure</td>\n<td>Whether to pure render</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>Specify the parent node of the floating layer that is rendered, which can be a string of node id, or a function that returns a node</td>\n<td>PopupProps[&apos;container&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Whether to follow scrolling</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>id</td>\n<td>Popup id, if passed value will support accessibility</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>delay</td>\n<td>If needed, set this parameter to allow the Tooltip content to be clicked, e.g. 100px</td>\n<td>number</td>\n<td>50</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"Known Issues\">Known Issues <a class=\"header-anchor scroll-count-item\" href=\"#Known Issues\" data-scroll-id=\"Known Issues\">#</a></h2>\n<ul>\n<li>For disabled elements, onMouseLeave can&apos;t be triggered in chrome, due to chrome&apos;s bug and can&apos;t be worked around at present.</li>\n</ul>\n<h2 id=\"ARIA And Key Board\">ARIA and KeyBoard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Key Board\" data-scroll-id=\"ARIA And Key Board\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">KeyBoard</th>\n<th style=\"text-align:left\">Descripiton</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">SPACE</td>\n<td style=\"text-align:left\">When <code>triggerType=&#x2018;click&#x2019;</code>, click will popup a prompt</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Enter</td>\n<td style=\"text-align:left\">When <code>triggerType=&#x2018;click&#x2019;</code>, click will popup a prompt</td>\n</tr>\n</tbody>\n</table>\n"}