添加tooltip

src/app/common/deploy/index.css

@@ -34,7 +34,7 @@ p.show {
 }
 
 .vice-title {
-    width: 120px;
+    width: 150px;
     display: inline-block;
 }
 

src/app/common/deploy/tencent/APIGroupCard.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Input, Collapse, Button, Radio, Icon} from 'antd';
+import {Input, Collapse, Button, Radio, Icon, Tooltip} from 'antd';
 import {ADD_APIGROUP, UPDATE_APIGROUP} from "../../../../gql";
 import {request} from 'graphql-request'
 import {idGen} from "../../../../func";
@@ -21,6 +21,16 @@ const valueToKey = {
     'region': 'region',
 };
 
+const toolTipTitle = {
+    'groupName': 'its groupName',
+    'environmentName': 'its environmentName',
+    'defaultDomain': 'its defaultDomain',
+    'frontType': 'its frontType',
+    'userDomain': 'its userDomain',
+    'userStatus': 'its userStatus',
+    'region': 'its region',
+};
+
 class APIGroupCard extends Component {
     constructor(props) {
         super(props);
@@ -158,12 +168,22 @@ class APIGroupCard extends Component {
                 <Collapse bordered={false}>
                     <Panel header="Want more options?" style={customPanelStyle}>
                         <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>{valueToKey['groupName']}: </span>
+                            <span className='vice-title'>{valueToKey['groupName']}
+                                <span> </span>
+                                <Tooltip placement="top" title={toolTipTitle['groupName']}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
                             <Input value={this.state.groupName} style={{width: 400}}
                                    onChange={this.switchConfig('groupName')}/>
                         </div>
                         <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>{valueToKey['region']}: </span>
+                            <span className='vice-title'>{valueToKey['region']}
+                                <span> </span>
+                                <Tooltip placement="top" title={toolTipTitle['region']}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
                             <Radio.Group onChange={this.switchConfig('groupRegion')} value={this.state.groupRegion} buttonStyle="solid">
                                 <Radio.Button value="guangzhou">Guangzhou</Radio.Button>
                                 <Radio.Button value="shanghai">Shanghai</Radio.Button>
@@ -172,7 +192,12 @@ class APIGroupCard extends Component {
                             </Radio.Group>
                         </div>
                         <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>{valueToKey['frontType']}: </span>
+                            <span className='vice-title'>{valueToKey['frontType']}
+                                <span> </span>
+                                <Tooltip placement="top" title={toolTipTitle['frontType']}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
                             <Radio.Group onChange={this.switchConfig('frontType')} defaultValue={this.state.frontType}
                                          buttonStyle="solid">
                                 <Radio.Button value="http">http</Radio.Button>
@@ -181,11 +206,21 @@ class APIGroupCard extends Component {
                             </Radio.Group>
                         </div>
                         <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>{valueToKey['defaultDomain']}: </span>
+                            <span className='vice-title'>{valueToKey['defaultDomain']}
+                                <span> </span>
+                                <Tooltip placement="top" title={toolTipTitle['defaultDomain']}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
                             <Input value={this.state.defaultDomain} style={{width: 400}} disabled/>
                         </div>
                         <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>{valueToKey['environmentName']}: </span>
+                            <span className='vice-title'>{valueToKey['environmentName']}
+                                <span> </span>
+                                <Tooltip placement="top" title={toolTipTitle['environmentName']}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
                             <Radio.Group onChange={this.switchConfig('environmentName')} defaultValue={this.state.environmentName}
                                          buttonStyle="solid">
                                 <Radio.Button value="test">test</Radio.Button>
@@ -194,12 +229,22 @@ class APIGroupCard extends Component {
                             </Radio.Group>
                         </div>
                         <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>{valueToKey['userDomain']}: </span>
+                            <span className='vice-title'>{valueToKey['userDomain']}
+                                <span> </span>
+                                <Tooltip placement="top" title={toolTipTitle['userDomain']}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
                             <Input value={this.state.userDomain} style={{width: 400}}
                                    onChange={this.switchConfig('userDomain')}/>
                         </div>
                         <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>{valueToKey['userStatus']}: </span>
+                            <span className='vice-title'>{valueToKey['userStatus']}
+                                <span> </span>
+                                <Tooltip placement="top" title={toolTipTitle['userStatus']}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
                             <Radio.Group onChange={this.switchConfig('userStatus')} defaultValue={this.state.userStatus}
                                          buttonStyle="solid">
                                 <Radio.Button value="open">open</Radio.Button>

src/app/common/deploy/tencent/APIPathCard.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Input, Radio, Collapse, Button, Icon} from 'antd';
+import {Input, Radio, Collapse, Button, Icon, Tooltip} from 'antd';
 import {request} from 'graphql-request'
 import {ADD_APIGWPATH, UPDATE_APIGWPATH} from "../../../../gql";
 import {idGen} from "../../../../func";
@@ -17,6 +17,12 @@ const valueToKey = {
     'requestMethod': 'Method'
 };
 
+const toolTipTitle = {
+    'apiGWName': 'its apiGWName',
+    'apiGWDesc': 'its apiGWDesc',
+    'requestMethod': 'its requestMethod'
+};
+
 class APIPathCard extends Component {
     constructor(props) {
         super(props);
@@ -141,14 +147,24 @@ class APIPathCard extends Component {
                         {
                             this.state.configs.map(config => (
                                 <div key={config} style={{marginBottom: 10}}>
-                                    <span className='vice-title'>{valueToKey[config]}: </span>
+                                    <span className='vice-title'>{valueToKey[config]}
+                                        <span> </span>
+                                        <Tooltip placement="top" title={toolTipTitle[config]}>
+                                            <Icon type="question-circle"/>
+                                        </Tooltip>
+                                    </span>
                                     <Input value={this.state[config]} style={{width: 200}}
                                            onChange={this.switchConfig(config)}/>
                                 </div>
                             ))
                         }
                         <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>{valueToKey['requestMethod']}: </span>
+                            <span className='vice-title'>{valueToKey['requestMethod']}
+                                <span> </span>
+                                <Tooltip placement="top" title={toolTipTitle['requestMethod']}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
                             <Radio.Group onChange={this.switchConfig('requestMethod')}
                                          defaultValue={this.state.requestMethod}
                                          buttonStyle="solid">

src/app/common/deploy/tencent/DeployCard.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Input, Radio, Collapse, Button, Icon} from 'antd';
+import {Input, Radio, Collapse, Button, Icon, Tooltip} from 'antd';
 import {ADD_DEPLOY, UPDATE_DEPLOY} from "../../../../gql";
 import {request} from 'graphql-request'
 import {idGen} from "../../../../func";
@@ -23,6 +23,18 @@ const valueToKey = {
     'description': 'description',
 };
 
+const toolTipTitle = {
+    'functionName': 'its funcname',
+    'cosBucketName': 'its cosBucketName',
+    'cosObjectName': 'its cosObjectName',
+    'cosBucketRegion': 'its cosBucketRegion',
+    'serviceName': 'its serviceName',
+    'subnetId': 'its subnetId',
+    'vpcId': 'its vpcId',
+    'region': 'its region',
+    'description': 'its description',
+};
+
 class DeployCard extends Component {
     constructor(props) {
         super(props);
@@ -173,12 +185,22 @@ class DeployCard extends Component {
         return (
             <div>
                 <div style={{marginBottom: 10}}>
-                    <span className='vice-title'>{valueToKey['functionName']}: </span>
+                    <span className='vice-title'>{valueToKey['functionName']}
+                        <span> </span>
+                        <Tooltip placement="top" title={toolTipTitle['functionName']}>
+                            <Icon type="question-circle"/>
+                        </Tooltip>
+                    </span>
                     <Input value={this.state.functionName} style={{width: 400}}
                            onChange={this.switchConfig('functionName')}/>
                 </div>
                 <div style={{marginBottom: 10}}>
-                    <span className='vice-title'>{valueToKey['region']}: </span>
+                    <span className='vice-title'>{valueToKey['region']}
+                        <span> </span>
+                        <Tooltip placement="top" title={toolTipTitle['region']}>
+                            <Icon type="question-circle"/>
+                        </Tooltip>
+                    </span>
                     <Radio.Group onChange={(e) => {
                         this.props.switchRegion(e);
                         this.setState({
@@ -194,7 +216,12 @@ class DeployCard extends Component {
                 <Collapse bordered={false}>
                     <Panel header="Want more options?" style={customPanelStyle}>
                         <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>{valueToKey['cosBucketRegion']}: </span>
+                            <span className='vice-title'>{valueToKey['cosBucketRegion']}
+                                <span> </span>
+                                <Tooltip placement="top" title={toolTipTitle['cosBucketRegion']}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
                             <Radio.Group onChange={this.switchConfig('cosBucketRegion')}
                                          value={this.state.cosBucketRegion} buttonStyle="solid">
                                 <Radio.Button value="guangzhou">Guangzhou</Radio.Button>
@@ -204,14 +231,24 @@ class DeployCard extends Component {
                             </Radio.Group>
                         </div>
                         <div style={{marginBottom: 10}}>
-                            <span className='vice-title'>{valueToKey['serviceName']}: </span>
+                            <span className='vice-title'>{valueToKey['serviceName']}
+                                <span> </span>
+                                <Tooltip placement="top" title={toolTipTitle['serviceName']}>
+                                    <Icon type="question-circle"/>
+                                </Tooltip>
+                            </span>
                             <Input value={this.state.serviceName} style={{width: 200}} disabled
                                    onChange={this.switchConfig('serviceName')}/>
                         </div>
                         {
                             this.state.configs.map(config => (
                                 <div key={config} style={{marginBottom: 10}}>
-                                    <span className='vice-title'>{valueToKey[config]}: </span>
+                                    <span className='vice-title'>{valueToKey[config]}
+                                        <span> </span>
+                                        <Tooltip placement="top" title={toolTipTitle[config]}>
+                                            <Icon type="question-circle"/>
+                                        </Tooltip>
+                                    </span>
                                     <Input value={this.state[config]} style={{width: 200}}
                                            onChange={this.switchConfig(config)}/>
                                 </div>