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

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

---
group:
  title: 云原生业务组件
---
# ToolTipCondition 条件气泡


## 代码库地址
https://code.alibaba-inc.com/cn-lowcode/cnd-tooltip-condition

### 适用场合：任何带禁用状态的组件都可以被ToolTipCondition包裹，用于提示用户当前操作被禁用的原因与解决方法。
## 基本使用

```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' }}
          /> 
      </ToolTipCondition>
    </div>
  );
};

export default Demo;
```

## API
继承所有 Balloon.Tooltip 的API，可跳转查看：https://xconsole.aliyun-inc.com/nexconsole/component_web/balloon?tabKey=develop#balloontooltip-v1

| 名称     | 类型                 | 说明                     | 默认值 |
| -------- | -------------------- | ------------------------ | ------ |
| show    | boolean       | 是否显示气泡    | false      | 
| tip | string / React.ReactNode              | 提示信息                 | -      |
| style | 自定义内联样式 | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |  |
| className | 自定义 CSS class | String | - |  |