## 基本使用
```tsx preview
import React from "react";
import { SmartBalloon, Button } from '@ali/cnd';

const Demo = () => {
  return (
    <SmartBalloon
      trigger={&lt;Button&gt;基本用法test&lt;/Button&gt;}
      children={"这是一条文字提示"}
      align="tl"
      alignEdge
      triggerType="click"
      style={{ width: 400, maxWidth: 400 }}
    />
  );
};

export default Demo;
```
## 为提示内容添加反馈
```tsx preview
import React from "react";
import { SmartBalloon, Button } from '@ali/cnd';

const Demo = () => {
  const content = (
    &lt;div&gt;
      &lt;h5&gt;这是一条文字提示&lt;/h5&gt;
      &lt;span&gt;
        这是一条文字提示的详细内容，这是一条文字提示的详细内容。这是一条文字提示的详细内容，这是一条文字提示的详细内容。这是一条文字提示的详细内容，这是一条文字提示的详细内容。
      &lt;/span&gt;
    &lt;/div&gt;
  );
  return (
    <SmartBalloon
      hasFeedback={true}
      trigger={&lt;Button&gt;提示有效性反馈&lt;/Button&gt;}
      children={content}
      align="t"
      triggerType="click"
      product="mse"
      code=""
      style={{ width: 400, maxWidth: 400 }}
    />
  );
};

export default Demo;
```
## 点击提示框区域进行放大预览
```tsx preview
import React from "react";
import { SmartBalloon, Button } from '@ali/cnd';

const Demo = () => {
  const content = (
    &lt;div&gt;
      &lt;h4 style={{ marginTop: 0 }}&gt;balloon title&lt;/h4&gt;
      &lt;hr /&gt;
      &lt;p&gt;balloon content&lt;/p&gt;
      &lt;div&gt;
        &lt;h5&gt;这是一条文字提示&lt;/h5&gt;
        &lt;span&gt;
          这是一条文字提示的详细内容，这是一条文字提示的详细内容。这是一条文字提示的详细内容，这是一条文字提示的详细内容。这是一条文字提示的详细内容，这是一条文字提示的详细内容。
        &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  return (
    <SmartBalloon
      closable={false}
      hasFeedback={true}
      trigger={&lt;Button&gt;点击提示框预览&lt;/Button&gt;}
      children={content}
      align="t"
      alignEdge
      triggerType="click"
      canPreview={true}
      style={{ width: 400, maxWidth: 400 }}
      previewStyle={{ width: 1000 }}
    />
  );
};

export default Demo;
```