lagi dan lagi

src/container/Otorisasi/User.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
 import SearchIcon from '@material-ui/icons/Search';
 import Images from "../../assets/Images";
-import MUIDataTable from "mui-datatables";
+import MUIDataTable, {TableBodyCell} from "mui-datatables";
 import AddUser from './User/AddUser';
 import EditUser from './User/EditUser'
 import api from "../../api";
@@ -17,6 +17,16 @@ import PopUpFailedSave from "../../library/PopUpFailedSave";
 import Constant from "../../library/Constant";
 import { css } from "@emotion/core";
 import PropagateLoader from "react-spinners/PropagateLoader"
+import Tooltip from '@material-ui/core/Tooltip';
+
+const LightTooltip = withStyles((theme) => ({
+  tooltip: {
+    backgroundColor: theme.palette.common.white,
+    color: 'rgba(0, 0, 0, 0.87)',
+    boxShadow: theme.shadows[1],
+    fontSize: 11,
+  },
+}))(Tooltip);
 
 const override = css`
   display: block;
@@ -271,12 +281,12 @@ export default class UserRole extends Component {
                     return (
                       <div style={{ display: 'flex' }}>
                         {tableMeta.rowData[6] != null && check > -1 ?
-                          <a data-tip={tableMeta.rowData[6][check].message} data-for="fullname">
+                          <LightTooltip title={tableMeta.rowData[6][check].message} arrow>
                             <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val == ''? 'Empty' : val}</span>
-                          </a> :
+                          </LightTooltip>
+                          :
                           <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val == ''? 'Empty' : val}</span>
                         }
-                        <ReactTooltip border={true} id="fullname" place="bottom" type="light" effect="solid" />
                       </div >
                     );
                   }
@@ -296,12 +306,12 @@ export default class UserRole extends Component {
                     return (
                       <div style={{ display: 'flex' }}>
                         {tableMeta.rowData[6] != null && check > -1 ?
-                          <a data-tip={tableMeta.rowData[6][check].message} data-for="email">
+                          <LightTooltip title={tableMeta.rowData[6][check].message} arrow>
                             <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val == ''? 'Empty' : val}</span>
-                          </a> :
+                          </LightTooltip>
+                          :
                           <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val == ''? 'Empty' : val}</span>
                         }
-                        <ReactTooltip border={true} id="email" place="bottom" type="light" effect="solid" />
                       </div >
                     );
                   }
@@ -322,12 +332,12 @@ export default class UserRole extends Component {
                     return (
                       <div style={{ display: 'flex' }}>
                         {tableMeta.rowData[6] != null && check > -1 ?
-                          <a data-tip={tableMeta.rowData[6][check].message} data-for="role">
+                          <LightTooltip title={tableMeta.rowData[6][check].message} arrow>
                             <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val == ''? 'Empty' : val}</span>
-                          </a> :
+                          </LightTooltip>
+                          :
                           <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val == ''? 'Empty' : val}</span>
                         }
-                        <ReactTooltip border={true} id="role" place="bottom" type="light" effect="solid" />
                       </div >
                     );
                   }
@@ -348,12 +358,12 @@ export default class UserRole extends Component {
                     return (
                       <div style={{ display: 'flex' }}>
                         {tableMeta.rowData[6] != null && check > -1 ?
-                          <a data-tip={tableMeta.rowData[6][check].message} data-for="startdate">
+                          <LightTooltip title={tableMeta.rowData[6][check].message} arrow>
                             <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val == ''? 'Empty' : val}</span>
-                          </a> :
+                          </LightTooltip>
+                          :
                           <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val == ''? 'Empty' : val}</span>
                         }
-                        <ReactTooltip border={true} id="startdate" place="bottom" type="light" effect="solid" />
                       </div >
                     );
                   }
@@ -374,12 +384,12 @@ export default class UserRole extends Component {
                     return (
                       <div style={{ display: 'flex' }}>
                         {tableMeta.rowData[6] != null && check > -1 ?
-                          <a data-tip={tableMeta.rowData[6][check].message} data-for="enddate">
+                          <LightTooltip title={tableMeta.rowData[6][check].message} arrow>
                             <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val == ''? 'Empty' : val}</span>
-                          </a> :
+                          </LightTooltip>
+                          :
                           <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val == ''? 'Empty' : val}</span>
                         }
-                        <ReactTooltip border={true} id="enddate" place="bottom" type="light" effect="solid" />
                       </div >
                     );
                   }
@@ -399,7 +409,7 @@ export default class UserRole extends Component {
               rows: dataRow,  
               visibleUpload: false, 
               visibleUser: false
-            });
+            }, () => console.log(dataRow));
           } else {
             this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
               if (response.data.message.includes("Someone Logged In")) {