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

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

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

const Demo = () => {
  return (
    <div>
     <ToolTipCondition show tip="提示语句"> 
      <span style={{color: "gray"}}>纯文本</span>
    </ToolTipCondition>
    </div>
  );
};

export default Demo;
```
## Button 使用
```tsx preview
import React from "react";
import { ToolTipCondition, Button } from "@ali/cnd";

const Demo = () => {
  return (
    <div>
     <ToolTipCondition show tip="提示语句"> 
       <Button disabled>操作按钮</Button> 
    </ToolTipCondition>
    </div>
  );
};

export default Demo;
```
## Radio 使用
```tsx preview
import React from "react";
import { ToolTipCondition, Radio } from "@ali/cnd";

const Demo = () => {
  return (
    <div>
     <ToolTipCondition show tip="提示语句">
      <Radio disabled>选项A</Radio> 
      </ToolTipCondition>
    </div>
  );
};

export default Demo;
```
## 输入框 使用
```tsx preview
import React  from "react";
import { ToolTipCondition, Select } from "@ali/cnd";

const Demo = () => {
  return (
    <div>
     <ToolTipCondition show tip="提示语句">
        <Select
            placeholder="请选择"
            onChange={()=>{}}
            size="medium"
            disabled
            dataSource={{}}
            style={{ width: '280px' }}
          /> 
      &lt;/ToolTipCondition&gt;
    &lt;/div&gt;
  );
};

export default Demo;
```