cnd-components-mcp/componentData/components/Balloon/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

### 基础形态
```tsx
import React from 'react';
import { Balloon, Button } from '@alicloud/console-components';

const titleStyle = {
  fontSize: '12px',
  fontWeight: 500,
  lineHeight: '20px',
  marginBottom: '8px',
};
const but = (
  <Button
    id="topRight"
    style={{
      margin: '25px 0 25px 400px',
      background: '#E5E5E5',
    }}
  />
);
const baseWithTittle = {
  trigger: but,
  content: (
    &lt;div style={{ width: '266px' }}&gt;
      &lt;div style={titleStyle}&gt;文字提示&lt;/div&gt;
      点击/鼠标移入元素，弹出气泡浮层，内容文案超出长度后允许自动换行。
    &lt;/div&gt;
  ),
};

export default () => {
  return (
    <Balloon
      align="l"
      closable={false}
      trigger={baseWithTittle.trigger}
      triggerType="click"
    >
      {baseWithTittle.content}
    &lt;/Balloon&gt;
  );
};

export const meta = {
  title: '带标题气泡',
  describe: '通过设置align属性设置气泡出现方向，气泡内容通过Children自定义。',
};

```
```tsx
import React from 'react';
import { Balloon, Button } from '@alicloud/console-components';

const but = (
  <Button
    id="topRight"
    style={{
      margin: '25px 0 25px 400px',
      background: '#E5E5E5',
    }}
  />
);
const baseWithPureText = {
  trigger: but,
  content: (
    &lt;div style={{ width: '266px' }}&gt;
      点击/鼠标移入元素，弹出气泡浮层，内容文案超出长度后允许自动换行。
    &lt;/div&gt;
  ),
};

export default () => {
  return (
    <Balloon
      align="l"
      closable={false}
      trigger={baseWithPureText.trigger}
      triggerType="click"
    >
      {baseWithPureText.content}
    &lt;/Balloon&gt;
  );
};

export const meta = {
  title: '纯文本Tooltip',
  describe: '通过设置align属性设置气泡出现方向，气泡内容通过Children自定义。',
};

```
### 额外形态
```tsx
import React from 'react';
import { Balloon, Button } from '@alicloud/console-components';

const titleStyle = {
  fontSize: '12px',
  fontWeight: 500,
  lineHeight: '20px',
  marginBottom: '8px',
};
const centerStyle = {
  lineHeight: '20px',
  fontSize: '12px',
  fontWeight: 'normal',
};

const but = (
  <Button
    id="topRight"
    style={{
      margin: '25px 0 25px 400px',
      background: '#E5E5E5',
    }}
  />
);
const ExtraWithOperation = {
  trigger: but,
  content: (
    &lt;div style={{ width: '266px' }}&gt;
      &lt;div style={titleStyle}&gt;第一步标题&lt;/div&gt;
      &lt;span style={centerStyle}&gt;
        点击/鼠标移入元素，弹出气泡浮层，内容文案超出长度后允许自动换行。点击/鼠标移入元素，弹出气泡浮层，内容文案超出长度后允许自动换行。
      &lt;/span&gt;
      &lt;div style={{ marginTop: 8 }}&gt;
        &lt;Button type="primary" size="small"&gt;
          下一步
        &lt;/Button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  ),
};

export default () => {
  return (
    &lt;Balloon align="l" trigger={ExtraWithOperation.trigger} triggerType="click"&gt;
      {ExtraWithOperation.content}
    &lt;/Balloon&gt;
  );
};

export const meta = {
  title: '操作型',
  describe: '通过设置align属性设置气泡出现方向，气泡内容通过Children自定义。',
};

```
```tsx
import React from 'react';
import { Balloon, Button } from '@alicloud/console-components';

const titleStyle = {
  fontSize: '12px',
  fontWeight: 500,
  lineHeight: '20px',
  marginBottom: '8px',
};

const but = (
  <Button
    id="topRight"
    style={{
      margin: '25px 0 25px 400px',
      background: '#E5E5E5',
    }}
  />
);

const ExtraWithPicture = {
  trigger: but,
  content: (
    &lt;div style={{ width: '266px' }}&gt;
      &lt;div style={titleStyle}&gt;第一步标题&lt;/div&gt;
      <div
        style={{
          backgroundColor: '#F6F6F6',
          width: 'auto',
          height: '106px',
          marginBottom: '8px',
        }}
      />
      &lt;span&gt;
        点击/鼠标移入元素，弹出气泡浮层，内容文案超出长度后允许自动换行。点击/鼠标移入元素，弹出气泡浮层，内容文案超出长度后允许自动换行。
      &lt;/span&gt;
    &lt;/div&gt;
  ),
};

export default () => {
  return (
    &lt;Balloon triggerType="click" align="l" trigger={ExtraWithPicture.trigger}&gt;
      {ExtraWithPicture.content}
    &lt;/Balloon&gt;
  );
};

export const meta = {
  title: '图文型',
  describe: '通过设置align属性设置气泡出现方向，气泡内容通过Children自定义。',
};

```
```tsx
import React from 'react';
import { Balloon, Button } from '@alicloud/console-components';

const titleStyle = {
  fontSize: '12px',
  fontWeight: 500,
  lineHeight: '20px',
  marginBottom: '8px',
};
const centerStyle = {
  lineHeight: '20px',
  fontSize: '12px',
  fontWeight: 'normal',
};

const but = (
  <Button
    id="topRight"
    style={{
      margin: '25px 0 25px 400px',
      background: '#E5E5E5',
    }}
  />
);
const ExtraWithOperation = {
  trigger: but,
  content: (
    &lt;div style={{ width: '266px' }}&gt;
      &lt;div style={titleStyle}&gt;第一步标题&lt;/div&gt;
      &lt;span style={centerStyle}&gt;
        点击/鼠标移入元素，弹出气泡浮层，内容文案超出长度后允许自动换行。点击/鼠标移入元素，弹出气泡浮层，内容文案超出长度后允许自动换行。
      &lt;/span&gt;
      &lt;div style={{ marginTop: 8 }}&gt;
        &lt;Button type="primary" size="small"&gt;
          下一步
        &lt;/Button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  ),
};

export default () => {
  return (
    &lt;Balloon align="l" trigger={ExtraWithOperation.trigger} triggerType="click"&gt;
      {ExtraWithOperation.content}
    &lt;/Balloon&gt;
  );
};

export const meta = {
  title: '操作型',
  describe: '通过设置align属性设置气泡出现方向，气泡内容通过Children自定义。',
};

```