[v1.9 bug bash] fix no-data mode table tooltip align center question (#3018)

src/webui/src/components/overview/table/SuccessTable.tsx

@@ -63,13 +63,12 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
     }
 
     tooltipStr = (
-        <div>
-            <p>The experiment is running, please wait for the final metric patiently.</p>
-            <div className='link'>
-                You could also find status of trial job with <span>{DETAILTABS}</span> button.
-            </div>
-        </div>
+        <React.Fragment>
+            The experiment is running, please wait for the final metric patiently. You could also find status of trial
+            job with <span>{DETAILTABS}</span> button.
+        </React.Fragment>
     );
+
     columns = [
         {
             name: 'Trial No.',
@@ -154,6 +153,7 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
     render(): React.ReactNode {
         const { columns, source } = this.state;
         const isNoneData = source.length === 0 ? true : false;
+
         return (
             <div id='succTable'>
                 <DetailsList

src/webui/src/static/style/succTable.scss

@@ -5,19 +5,17 @@
     position: relative;
 
     .succTable-tooltip {
+        width: 90%;
         position: absolute;
-        top: 40%;
-        left: 5%;
-
-        .link {
-            margin-left: 15px;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
 
         a {
             font-weight: 500;
             color: blue;
         }
     }
-    }
 
     .succeed-padding {
         padding-left: 6px;