diff --git a/src/components/EnvironmentVariables/index.js b/src/components/EnvironmentVariables/index.js
index f1332e87..1c65e9cd 100644
--- a/src/components/EnvironmentVariables/index.js
+++ b/src/components/EnvironmentVariables/index.js
@@ -7,6 +7,7 @@ import Image from 'next/image';
 import { LoadingOutlined } from '@ant-design/icons';
 import { useLazyQuery } from '@apollo/react-hooks';
 import { Tag } from 'antd';
+import { Tooltip } from 'antd';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Alert from 'components/Alert';
 import Btn from 'components/Button';
@@ -305,49 +306,53 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
                           <VariableActions>
                             <Collapse in={openEnvVars}>
                               <div className="varUpdate">
-                                <Button
-                                  onClick={() => setUpdateValue(envVar.value, envVar.name, envVar.scope)}
-                                  style={{ all: 'unset' }}
-                                >
-                                  <AddVariable
-                                    varProject={environment.project.name}
-                                    varEnvironment={environment.name}
-                                    varValues={displayVars}
-                                    varTarget="Environment"
-                                    varName={updateVarName}
-                                    varValue={updateVarValue}
-                                    varScope={updateVarScope}
-                                    refresh={onVariableAdded}
-                                    icon="edit"
-                                    action="edit"
-                                  />
-                                </Button>
+                                <Tooltip overlayClassName="componentTooltip" title="Update Variable" placement="bottom">
+                                  <Button
+                                    onClick={() => setUpdateValue(envVar.value, envVar.name, envVar.scope)}
+                                    style={{ all: 'unset' }}
+                                  >
+                                    <AddVariable
+                                      varProject={environment.project.name}
+                                      varEnvironment={environment.name}
+                                      varValues={displayVars}
+                                      varTarget="Environment"
+                                      varName={updateVarName}
+                                      varValue={updateVarValue}
+                                      varScope={updateVarScope}
+                                      refresh={onVariableAdded}
+                                      icon="edit"
+                                      action="edit"
+                                    />
+                                  </Button>
+                                </Tooltip>
                               </div>
                             </Collapse>
                             <div className="varDelete">
-                              <Button onClick={() => permissionCheck('delete', index)} style={{ all: 'unset' }}>
-                                {envLoading && action === 'delete' ? (
-                                  <DeleteVariableButton>
-                                    <Btn
-                                      index={index}
-                                      variant="red"
-                                      icon={!valueState[index] ? 'bin' : ''}
-                                      className="delete-btn"
-                                    >
-                                      {valueState[index] ? <LoadingOutlined /> : 'Delete'}
-                                    </Btn>
-                                  </DeleteVariableButton>
-                                ) : (
-                                  <DeleteVariable
-                                    deleteType="Environment variable"
-                                    deleteName={envVar.name}
-                                    varProject={environment.project.name}
-                                    varEnvironment={environment.name}
-                                    icon="bin"
-                                    refresh={onVariableAdded}
-                                  />
-                                )}
-                              </Button>
+                              <Tooltip overlayClassName="componentTooltip" title="Delete Variable" placement="bottom">
+                                <Button onClick={() => permissionCheck('delete', index)} style={{ all: 'unset' }}>
+                                  {envLoading && action === 'delete' ? (
+                                    <DeleteVariableButton>
+                                      <Btn
+                                        index={index}
+                                        variant="red"
+                                        icon={!valueState[index] ? 'bin' : ''}
+                                        className="delete-btn"
+                                      >
+                                        {valueState[index] ? <LoadingOutlined /> : 'Delete'}
+                                      </Btn>
+                                    </DeleteVariableButton>
+                                  ) : (
+                                    <DeleteVariable
+                                      deleteType="Environment variable"
+                                      deleteName={envVar.name}
+                                      varProject={environment.project.name}
+                                      varEnvironment={environment.name}
+                                      icon="bin"
+                                      refresh={onVariableAdded}
+                                    />
+                                  )}
+                                </Button>
+                              </Tooltip>
                             </div>
                           </VariableActions>
                         </div>
diff --git a/src/components/ProjectVariables/index.js b/src/components/ProjectVariables/index.js
index 29db26fd..4cd18cdb 100644
--- a/src/components/ProjectVariables/index.js
+++ b/src/components/ProjectVariables/index.js
@@ -7,6 +7,7 @@ import Image from 'next/image';
 import { LoadingOutlined } from '@ant-design/icons';
 import { useLazyQuery } from '@apollo/react-hooks';
 import { Tag } from 'antd';
+import { Tooltip } from 'antd';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Alert from 'components/Alert';
 import Btn from 'components/Button';
@@ -218,47 +219,51 @@ const ProjectVariables = ({ project, onVariableAdded }) => {
                           <VariableActions>
                             <Collapse in={openPrjVars}>
                               <div className="varUpdate">
-                                <Button
-                                  onClick={() => setUpdateValue(projEnvVar.value, projEnvVar.name, projEnvVar.scope)}
-                                  style={{ all: 'unset' }}
-                                >
-                                  <AddVariable
-                                    varProject={project.name}
-                                    varValues={displayVars}
-                                    varTarget="Project"
-                                    varName={updateVarName}
-                                    varValue={updateVarValue}
-                                    varScope={updateVarScope}
-                                    refresh={onVariableAdded}
-                                    icon="edit"
-                                    action="edit"
-                                  />
-                                </Button>
+                                <Tooltip overlayClassName="componentTooltip" title="Update Variable" placement="bottom">
+                                  <Button
+                                    onClick={() => setUpdateValue(projEnvVar.value, projEnvVar.name, projEnvVar.scope)}
+                                    style={{ all: 'unset' }}
+                                  >
+                                    <AddVariable
+                                      varProject={project.name}
+                                      varValues={displayVars}
+                                      varTarget="Project"
+                                      varName={updateVarName}
+                                      varValue={updateVarValue}
+                                      varScope={updateVarScope}
+                                      refresh={onVariableAdded}
+                                      icon="edit"
+                                      action="edit"
+                                    />
+                                  </Button>
+                                </Tooltip>
                               </div>
                             </Collapse>
                             <div className="varDelete" data-cy="varDelete">
-                              <Button onClick={() => permissionCheck('delete', index)} style={{ all: 'unset' }}>
-                                {prjLoading && action === 'delete' ? (
-                                  <DeleteVariableButton>
-                                    <Btn
-                                      index={index}
-                                      variant="red"
-                                      icon={!valueState[index] ? 'bin' : ''}
-                                      className="delete-btn"
-                                    >
-                                      {valueState[index] ? <LoadingOutlined /> : 'Delete'}
-                                    </Btn>
-                                  </DeleteVariableButton>
-                                ) : (
-                                  <DeleteVariable
-                                    deleteType="Project variable"
-                                    deleteName={projEnvVar.name}
-                                    varProject={project.name}
-                                    icon="bin"
-                                    refresh={onVariableAdded}
-                                  />
-                                )}
-                              </Button>
+                              <Tooltip overlayClassName="componentTooltip" title="Delete Variable" placement="bottom">
+                                <Button onClick={() => permissionCheck('delete', index)} style={{ all: 'unset' }}>
+                                  {prjLoading && action === 'delete' ? (
+                                    <DeleteVariableButton>
+                                      <Btn
+                                        index={index}
+                                        variant="red"
+                                        icon={!valueState[index] ? 'bin' : ''}
+                                        className="delete-btn"
+                                      >
+                                        {valueState[index] ? <LoadingOutlined /> : 'Delete'}
+                                      </Btn>
+                                    </DeleteVariableButton>
+                                  ) : (
+                                    <DeleteVariable
+                                      deleteType="Project variable"
+                                      deleteName={projEnvVar.name}
+                                      varProject={project.name}
+                                      icon="bin"
+                                      refresh={onVariableAdded}
+                                    />
+                                  )}
+                                </Button>
+                              </Tooltip>
                             </div>
                           </VariableActions>
                         </div>
diff --git a/src/layouts/GlobalStyles/index.tsx b/src/layouts/GlobalStyles/index.tsx
index 7a6e5865..815bc326 100644
--- a/src/layouts/GlobalStyles/index.tsx
+++ b/src/layouts/GlobalStyles/index.tsx
@@ -42,7 +42,15 @@ body {
   color: ${props => (props.theme.colorScheme === 'dark' ? '#000' : '#fff')};
   background: ${props => (props.theme.colorScheme === 'dark' ? '#fff' : '#000')};
   }
-
+}
+.componentTooltip {
+  .ant-tooltip-arrow:before{
+   background: ${props => (props.theme.colorScheme === 'dark' ? '#fff' : '#000')};
+  }
+  .ant-tooltip-content .ant-tooltip-inner{
+  color: ${props => (props.theme.colorScheme === 'dark' ? '#000' : '#fff')};
+  background: ${props => (props.theme.colorScheme === 'dark' ? '#fff' : '#000')};
+  }
 }
 
 #__next {