hover text and button color

src/app/app.component.html

 <div class="app-container">
     <app-toastr></app-toastr>
     <app-loader></app-loader>
-    <div>
-        <div class="text-center main-header">
-            <h6 class="m-0">BHC Meta Tagging</h6>
-        </div>
-    </div>
+
     <router-outlet></router-outlet>
     <!-- <app-footer></app-footer> -->
 </div>
\ No newline at end of file

src/app/common-components/annotate-text/annotate-text.component.html

@@ -15,9 +15,14 @@
     <div class="col-12 ">
         <div class="tags-container pb-1">
             <label class="grey-label ps-3">Tags:</label>
-            <button *ngFor="let data of inputData.class_details" type="button" class="btn btn-primary m-1 " (click)="addAnnotation(data)">
-                {{data}}
-            </button>
+            <ng-container *ngFor="let data of inputData.class_details">
+                <button type="button" class="btn default-datatype m-1 " (click)="addAnnotation(data)" *ngIf="inputData['defaultDataType'] === data" ngbTooltip="Default Data Type">
+                    {{data}}
+                </button>
+                <button type="button" class="btn btn-primary m-1 " (click)="addAnnotation(data)" *ngIf="inputData['defaultDataType'] !== data">
+                    {{data}}
+                </button>
+            </ng-container>
         </div>
     </div>
     <div class="col-md-12 mt-3">

src/app/common-components/annotate-text/annotate-text.component.scss

@@ -23,4 +23,13 @@
 .datatype-text {
     max-height: 4rem;
     overflow-y: auto;
+}
+
+.default-datatype {
+    background: #ed8b00;
+    color: #FFF;
+    &:hover {
+        background: #ffc107;
+        color: #FFF;
+    }
 }
\ No newline at end of file

src/app/common-components/common-components.module.ts

@@ -10,6 +10,7 @@ import { AnnotateTextComponent } from './annotate-text/annotate-text.component';
 import { NgxAnnotateTextModule } from 'ngx-annotate-text';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { FormsModule } from '@angular/forms';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 
 
@@ -26,7 +27,8 @@ import { FormsModule } from '@angular/forms';
     SimpleTableWithPaginationModule,
     ToasterModule,
     TableServerSideModule,
-    NgxAnnotateTextModule
+    NgxAnnotateTextModule,
+    NgbModule
   ],
   exports:[
     SimpleTableWithPaginationModule,

src/app/common-components/table-server-side/table-server-side.component.html

@@ -203,7 +203,7 @@
                 </ng-template>
                 <!-- th.clickAble.condition -->
                 <ng-template #clickableCell>
-                    <span class="active clickable-element" [ngClass]="settings?.clickableColumns?.class" (click)="cellClick(tr,th)">
+                    <span class="active clickable-element" [ngClass]="settings?.clickableColumns?.class" (click)="cellClick(tr,th)" [title]="tr[th.key]">
                                     <ng-container
                                         *ngIf="th.clickAble?.condition?.altText?.value ; then clickableWithAlt else clickableWithoutAlt">
                                     </ng-container>

src/app/pages/landing/landing.component.ts

@@ -465,6 +465,7 @@ export class LandingComponent implements OnInit {
       this.http.API_REQUEST(request).subscribe((response) => {
         if (response.status === 'SUCCESS' && response.data) {
           this.annotateData = response.data;
+          this.annotateData['defaultDataType'] = data['data_type'];
           this.modalService.open(this.editPopup, this.modalOptions);
         } else {
           this._toast.toast('warning', 'Warning', response.message || 'Error while Loading data.', true);

src/app/pages/pages.component.html

+<div>
+    <div>
+        <div class="text-center main-header">
+            <h6 class="m-0">BHC Meta Tagging</h6>
+        </div>
+    </div>
+</div>
 <div>
     <router-outlet></router-outlet>
 </div>
\ No newline at end of file

src/assets/jsons/requestTable.json

@@ -29,13 +29,13 @@
             }
         ],
         "body_content": [{
-                "table_name": "Table1",
-                "data_type": "Type1",
+                "table_name": "Table1asfashlfaslfhsdalfhsldafjhsaldfjhlsdafhalsfjhsdalfjhladsfasdhf",
+                "data_type": "DISEASE",
                 "status": "<span class=\"text-success\" > <i class=\"fa fa-check-circle-o\"></i>&nbsp;Completed </span>"
             },
             {
                 "table_name": "Table1",
-                "data_type": "Type1",
+                "data_type": "PROBLEM",
                 "status": "<span class=\"text-grey\" > <i class=\"fa fa-check-circle-o\"></i>&nbsp;Pending </span>"
             }
         ],