diff --git a/src/portal/lib/src/config/gc/gc.component.spec.ts b/src/portal/lib/src/config/gc/gc.component.spec.ts
index 635ba8eb1..c9b442682 100644
--- a/src/portal/lib/src/config/gc/gc.component.spec.ts
+++ b/src/portal/lib/src/config/gc/gc.component.spec.ts
@@ -7,6 +7,7 @@ import { SharedModule } from "../../shared/shared.module";
 import { ErrorHandler } from '../../error-handler/error-handler';
 import { GcViewModelFactory } from './gc.viewmodel.factory';
 import { CronScheduleComponent } from '../../cron-schedule/cron-schedule.component';
+import { CronTooltipComponent } from "../../cron-schedule/cron-tooltip/cron-tooltip.component";
 import { of } from 'rxjs';
 
 describe('GcComponent', () => {
@@ -33,7 +34,7 @@ describe('GcComponent', () => {
       imports: [
         SharedModule
       ],
-      declarations: [ GcComponent,  CronScheduleComponent],
+      declarations: [ GcComponent,  CronScheduleComponent, CronTooltipComponent],
       providers: [
         { provide: GcApiRepository, useClass: GcApiDefaultRepository },
         { provide: SERVICE_CONFIG, useValue: config },
diff --git a/src/portal/lib/src/config/registry-config.component.spec.ts b/src/portal/lib/src/config/registry-config.component.spec.ts
index f08055e2e..d938115da 100644
--- a/src/portal/lib/src/config/registry-config.component.spec.ts
+++ b/src/portal/lib/src/config/registry-config.component.spec.ts
@@ -11,7 +11,7 @@ import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation
 import { GcComponent } from './gc/gc.component';
 import { GcHistoryComponent } from './gc/gc-history/gc-history.component';
 import { CronScheduleComponent } from '../cron-schedule/cron-schedule.component';
-
+import { CronTooltipComponent } from "../cron-schedule/cron-tooltip/cron-tooltip.component";
 import {
   ConfigurationService,
   ConfigurationDefaultService,
@@ -69,7 +69,8 @@ describe('RegistryConfigComponent (inline template)', () => {
         ConfirmationDialogComponent,
         GcComponent,
         GcHistoryComponent,
-        CronScheduleComponent
+        CronScheduleComponent,
+        CronTooltipComponent
       ],
       providers: [
         ErrorHandler,
diff --git a/src/portal/lib/src/create-edit-rule/create-edit-rule.component.html b/src/portal/lib/src/create-edit-rule/create-edit-rule.component.html
index 34e346769..bcd4a6735 100644
--- a/src/portal/lib/src/create-edit-rule/create-edit-rule.component.html
+++ b/src/portal/lib/src/create-edit-rule/create-edit-rule.component.html
@@ -147,59 +147,9 @@
                 </label>
                 <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-left top-7 cron-tooltip">
                     <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
-                    <table class="table table-noborder tooltip-content table-style">
-                        <caption class="table-title">
-                          <span>
-                            {{ 'REPLICATION.CRON-TITLE' | translate }}              
-                          </span>
-                        </caption>
-                        <thead>
-                            <tr>
-                                <th>{{ 'REPLICATION.FIELD_NAME' | translate }}</th>
-                                <th>{{ 'REPLICATION.MANDATORY' | translate }}</th>
-                                <th>{{ 'REPLICATION.ALLOWED_VALUES' | translate }}</th>
-                                <th>{{ 'REPLICATION.ALLOWED_CHARACTERS' | translate }}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>{{'REPLICATION.SECONDS' | translate}}</td>
-                                <td>{{'REPLICATION.YES' | translate}}</td>
-                                <td>0-59</td>
-                                <td>* / , -</td>
-                            </tr>
-                            <tr>
-                                <td>{{'REPLICATION.MINUTES' | translate}}</td>
-                                <td>{{'REPLICATION.YES' | translate}}</td>
-                                <td>0-59</td>
-                                <td>* / , -</td>
-                            </tr>
-                            <tr>
-                                <td>{{'REPLICATION.HOURS' | translate}}</td>
-                                <td>{{'REPLICATION.YES' | translate}}</td>
-                                <td>0-23</td>
-                                <td>* / , -</td>
-                            </tr>
-                            <tr>
-                                <td>{{'REPLICATION.DAY_MONTH' | translate}}</td>
-                                <td>{{'REPLICATION.YES' | translate}}</td>
-                                <td>1-31</td>
-                                <td>* / , - ?</td>
-                            </tr>
-                            <tr>
-                                <td>{{'REPLICATION.MONTH' | translate}}</td>
-                                <td>{{'REPLICATION.YES' | translate}}</td>
-                                <td>1-12 or JAN-DEC</td>
-                                <td>* / , -</td>
-                            </tr>
-                            <tr>
-                                <td>{{'REPLICATION.DAY_WEEK' | translate}}</td>
-                                <td>{{'REPLICATION.YES' | translate}}</td>
-                                <td>0-6 or SUN-SAT</td>
-                                <td>* / , - ?</td>
-                            </tr>
-                        </tbody>
-                    </table>
+                    <div class="tooltip-content table-box">
+                        <cron-tooltip></cron-tooltip>
+                    </div>
                 </a>
               </div>
             </div>
diff --git a/src/portal/lib/src/create-edit-rule/create-edit-rule.component.scss b/src/portal/lib/src/create-edit-rule/create-edit-rule.component.scss
index 711f495d7..7bbcd39e1 100644
--- a/src/portal/lib/src/create-edit-rule/create-edit-rule.component.scss
+++ b/src/portal/lib/src/create-edit-rule/create-edit-rule.component.scss
@@ -261,19 +261,7 @@ clr-modal {
 .cron-tooltip {
     color: gray;
     cursor: default;
-    .table-style {
-        margin-right: 462px;
+    .table-box {
         width: 20rem;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        .table-title {
-            border-top-left-radius: 0.125rem;
-            border-top-right-radius: 0.125rem;
-            background: #000;
-            color: #fff;
-            span {
-               font-size: 16px;
-            }
-        }
     }
 }
\ No newline at end of file
diff --git a/src/portal/lib/src/create-edit-rule/create-edit-rule.component.spec.ts b/src/portal/lib/src/create-edit-rule/create-edit-rule.component.spec.ts
index bbf887759..7f2304c61 100644
--- a/src/portal/lib/src/create-edit-rule/create-edit-rule.component.spec.ts
+++ b/src/portal/lib/src/create-edit-rule/create-edit-rule.component.spec.ts
@@ -8,7 +8,7 @@ import { ConfirmationDialogComponent } from "../confirmation-dialog/confirmation
 import { ReplicationComponent } from "../replication/replication.component";
 
 import { ListReplicationRuleComponent } from "../list-replication-rule/list-replication-rule.component";
-
+import { CronTooltipComponent } from "../cron-schedule/cron-tooltip/cron-tooltip.component";
 import { CreateEditRuleComponent } from "./create-edit-rule.component";
 import { DatePickerComponent } from "../datetime-picker/datetime-picker.component";
 import { FilterComponent } from "../filter/filter.component";
@@ -232,6 +232,7 @@ describe("CreateEditRuleComponent (inline template)", () => {
         ReplicationComponent,
         ListReplicationRuleComponent,
         CreateEditRuleComponent,
+        CronTooltipComponent,
         ConfirmationDialogComponent,
         DatePickerComponent,
         FilterComponent,
diff --git a/src/portal/lib/src/cron-schedule/cron-schedule.component.html b/src/portal/lib/src/cron-schedule/cron-schedule.component.html
index 16fce4c9a..315560e47 100644
--- a/src/portal/lib/src/cron-schedule/cron-schedule.component.html
+++ b/src/portal/lib/src/cron-schedule/cron-schedule.component.html
@@ -43,59 +43,9 @@
     </label>
     <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-right top-7 cron-tooltip">
         <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
-        <table class="table table-noborder tooltip-content table-style">
-            <caption class="table-title">
-              <span>
-                {{ 'REPLICATION.CRON-TITLE' | translate }}              
-              </span>
-            </caption>
-            <thead>
-                <tr>
-                    <th>{{ 'REPLICATION.FIELD_NAME' | translate }}</th>
-                    <th>{{ 'REPLICATION.MANDATORY' | translate }}</th>
-                    <th>{{ 'REPLICATION.ALLOWED_VALUES' | translate }}</th>
-                    <th>{{ 'REPLICATION.ALLOWED_CHARACTERS' | translate }}</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td>{{'REPLICATION.SECONDS' | translate}}</td>
-                    <td>{{'REPLICATION.YES' | translate}}</td>
-                    <td>0-59</td>
-                    <td>* / , -</td>
-                </tr>
-                <tr>
-                    <td>{{'REPLICATION.MINUTES' | translate}}</td>
-                    <td>{{'REPLICATION.YES' | translate}}</td>
-                    <td>0-59</td>
-                    <td>* / , -</td>
-                </tr>
-                <tr>
-                    <td>{{'REPLICATION.HOURS' | translate}}</td>
-                    <td>{{'REPLICATION.YES' | translate}}</td>
-                    <td>0-23</td>
-                    <td>* / , -</td>
-                </tr>
-                <tr>
-                    <td>{{'REPLICATION.DAY_MONTH' | translate}}</td>
-                    <td>{{'REPLICATION.YES' | translate}}</td>
-                    <td>1-31</td>
-                    <td>* / , - ?</td>
-                </tr>
-                <tr>
-                    <td>{{'REPLICATION.MONTH' | translate}}</td>
-                    <td>{{'REPLICATION.YES' | translate}}</td>
-                    <td>1-12 or JAN-DEC</td>
-                    <td>* / , -</td>
-                </tr>
-                <tr>
-                    <td>{{'REPLICATION.DAY_WEEK' | translate}}</td>
-                    <td>{{'REPLICATION.YES' | translate}}</td>
-                    <td>0-6 or SUN-SAT</td>
-                    <td>* / , - ?</td>
-                </tr>
-            </tbody>
-        </table>
+        <div class="tooltip-content table-box">
+            <cron-tooltip></cron-tooltip>
+        </div>
     </a>
   </div>
   <div class="confirm-button">
diff --git a/src/portal/lib/src/cron-schedule/cron-schedule.component.scss b/src/portal/lib/src/cron-schedule/cron-schedule.component.scss
index 98bc2b620..eb1494702 100644
--- a/src/portal/lib/src/cron-schedule/cron-schedule.component.scss
+++ b/src/portal/lib/src/cron-schedule/cron-schedule.component.scss
@@ -55,22 +55,8 @@
     .cron-tooltip {
       color: gray;
       cursor: default;
-      .table-style {
-          margin-right: 462px;
-          width: 20rem;
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
-          .table-title {
-              border-top-left-radius: 0.125rem;
-              border-top-right-radius: 0.125rem;
-              height: 40px;
-              line-height: 40px;
-              background: #000;
-              color: #fff;
-              span {
-                 font-size: 16px;
-              }
-          }
+      .table-box {
+        width: 20rem;
       }
   }
   }
diff --git a/src/portal/lib/src/cron-schedule/cron-tooltip/cron-tooltip.component.html b/src/portal/lib/src/cron-schedule/cron-tooltip/cron-tooltip.component.html
new file mode 100644
index 000000000..3096bb423
--- /dev/null
+++ b/src/portal/lib/src/cron-schedule/cron-tooltip/cron-tooltip.component.html
@@ -0,0 +1,53 @@
+<table class="table table-noborder table-style">
+    <caption class="table-title">
+      <span>
+        {{ 'REPLICATION.CRON-TITLE' | translate }}              
+      </span>
+    </caption>
+    <thead>
+        <tr>
+            <th>{{ 'REPLICATION.FIELD_NAME' | translate }}</th>
+            <th>{{ 'REPLICATION.MANDATORY' | translate }}</th>
+            <th>{{ 'REPLICATION.ALLOWED_VALUES' | translate }}</th>
+            <th>{{ 'REPLICATION.ALLOWED_CHARACTERS' | translate }}</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>{{'REPLICATION.SECONDS' | translate}}</td>
+            <td>{{'REPLICATION.YES' | translate}}</td>
+            <td>0-59</td>
+            <td>* / , -</td>
+        </tr>
+        <tr>
+            <td>{{'REPLICATION.MINUTES' | translate}}</td>
+            <td>{{'REPLICATION.YES' | translate}}</td>
+            <td>0-59</td>
+            <td>* / , -</td>
+        </tr>
+        <tr>
+            <td>{{'REPLICATION.HOURS' | translate}}</td>
+            <td>{{'REPLICATION.YES' | translate}}</td>
+            <td>0-23</td>
+            <td>* / , -</td>
+        </tr>
+        <tr>
+            <td>{{'REPLICATION.DAY_MONTH' | translate}}</td>
+            <td>{{'REPLICATION.YES' | translate}}</td>
+            <td>1-31</td>
+            <td>* / , - ?</td>
+        </tr>
+        <tr>
+            <td>{{'REPLICATION.MONTH' | translate}}</td>
+            <td>{{'REPLICATION.YES' | translate}}</td>
+            <td>1-12 or JAN-DEC</td>
+            <td>* / , -</td>
+        </tr>
+        <tr>
+            <td>{{'REPLICATION.DAY_WEEK' | translate}}</td>
+            <td>{{'REPLICATION.YES' | translate}}</td>
+            <td>0-6 or SUN-SAT</td>
+            <td>* / , - ?</td>
+        </tr>
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/src/portal/lib/src/cron-schedule/cron-tooltip/cron-tooltip.component.scss b/src/portal/lib/src/cron-schedule/cron-tooltip/cron-tooltip.component.scss
new file mode 100644
index 000000000..d12e3390f
--- /dev/null
+++ b/src/portal/lib/src/cron-schedule/cron-tooltip/cron-tooltip.component.scss
@@ -0,0 +1,14 @@
+.table-style {
+    margin-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    color: #fff;
+    .table-title {
+        border-top-left-radius: 0.125rem;
+        border-top-right-radius: 0.125rem;
+        background: #000;
+        span {
+           font-size: 16px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/portal/lib/src/cron-schedule/cron-tooltip/cron-tooltip.component.ts b/src/portal/lib/src/cron-schedule/cron-tooltip/cron-tooltip.component.ts
new file mode 100644
index 000000000..b3da19774
--- /dev/null
+++ b/src/portal/lib/src/cron-schedule/cron-tooltip/cron-tooltip.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'cron-tooltip',
+  templateUrl: './cron-tooltip.component.html',
+  styleUrls: ['./cron-tooltip.component.scss']
+})
+export class CronTooltipComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/portal/lib/src/cron-schedule/index.ts b/src/portal/lib/src/cron-schedule/index.ts
index b70e5071e..dfcdf2056 100644
--- a/src/portal/lib/src/cron-schedule/index.ts
+++ b/src/portal/lib/src/cron-schedule/index.ts
@@ -1,6 +1,9 @@
 import { Type } from "@angular/core";
 
 import { CronScheduleComponent } from "./cron-schedule.component";
+import { CronTooltipComponent } from "./cron-tooltip/cron-tooltip.component";
+
 export const CRON_SCHEDULE_DIRECTIVES: Type<any>[] = [
-    CronScheduleComponent
+    CronScheduleComponent,
+    CronTooltipComponent
 ];
diff --git a/src/portal/lib/src/replication/replication.component.html b/src/portal/lib/src/replication/replication.component.html
index 21aa8730b..f02d19304 100644
--- a/src/portal/lib/src/replication/replication.component.html
+++ b/src/portal/lib/src/replication/replication.component.html
@@ -2,7 +2,7 @@
   <div>
     <div class="row flex-items-xs-between rightPos">
       <div class="flex-xs-middle option-right">
-        <hbr-filter [withDivider]="true" filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filterEvt)="doSearchRules($event)"
+        <hbr-filter id="filter-rules" [withDivider]="true" filterPlaceholder='{{"REPLICATION.FILTER_POLICIES_PLACEHOLDER" | translate}}' (filterEvt)="doSearchRules($event)"
           [currentValue]="search.ruleName"></hbr-filter>
         <span class="refresh-btn" (click)="refreshRules()">
           <clr-icon shape="refresh"></clr-icon>
@@ -32,7 +32,7 @@
                 <option value="status">{{'REPLICATION.STATUS' | translate}}</option>
               </select>
             </div>
-            <hbr-filter [withDivider]="true" (openFlag)="openFilter($event)"
+            <hbr-filter id="filter-executions" [withDivider]="true" (openFlag)="openFilter($event)"
               filterPlaceholder='{{"REPLICATION.FILTER_EXECUTIONS_PLACEHOLDER" | translate}}'
               (filterEvt)="doSearchExecutions($event)" [currentValue]="currentTerm"></hbr-filter>
             <span class="refresh-btn">
diff --git a/src/portal/lib/src/replication/replication.component.spec.ts b/src/portal/lib/src/replication/replication.component.spec.ts
index 7c0f1900a..cfdc1d8d2 100644
--- a/src/portal/lib/src/replication/replication.component.spec.ts
+++ b/src/portal/lib/src/replication/replication.component.spec.ts
@@ -8,10 +8,12 @@ import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation
 import { ReplicationComponent } from './replication.component';
 import { ListReplicationRuleComponent } from '../list-replication-rule/list-replication-rule.component';
 import { CreateEditRuleComponent } from '../create-edit-rule/create-edit-rule.component';
+import { CronScheduleComponent } from '../cron-schedule/cron-schedule.component';
 import { DatePickerComponent } from '../datetime-picker/datetime-picker.component';
 import { FilterComponent } from '../filter/filter.component';
 import { InlineAlertComponent } from '../inline-alert/inline-alert.component';
 import {ReplicationRule, ReplicationJob, Endpoint} from '../service/interface';
+import { CronTooltipComponent } from "../cron-schedule/cron-tooltip/cron-tooltip.component";
 
 import { ErrorHandler } from '../error-handler/error-handler';
 import { SERVICE_CONFIG, IServiceConfig } from '../service.config';
@@ -161,6 +163,8 @@ describe('Replication Component (inline template)', () => {
         ReplicationComponent,
         ListReplicationRuleComponent,
         CreateEditRuleComponent,
+        CronTooltipComponent,
+        CronScheduleComponent,
         ConfirmationDialogComponent,
         DatePickerComponent,
         FilterComponent,