init

src/webparts/summaryWebPart/components/RejectTasks/RejectTasks.module.scss

@@ -6,7 +6,7 @@
     caption-side:bottom;
     table-layout: fixed;
     overflow: hidden;
-    white-space: nowrap;
+    //white-space: nowrap;
     thead {
         tr {
             th{
@@ -19,7 +19,6 @@
                 transition: 0.5s; 
                 white-space: normal;
                 word-break: break-all;
-                cursor: pointer;
                 &:hover {
                     background: #f4f4f4;
                     color: #666666;
@@ -30,6 +29,7 @@
     } 
     .commonTbody {
         tr {
+            max-height: calc(14px * 3);
             td {
                 padding: 6px;
                 border: 1px solid #c8c8c8;
@@ -37,7 +37,6 @@
                 color: #767676;
                 font-size: 13px;
                 transition: 0.5s; 
-                cursor: pointer;
                 &:hover {
                     background: #f4f4f4;
                     color: #666666;

src/webparts/summaryWebPart/components/RejectTasks/RejectTasks.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { DeviationTasks } from '../../interfaces/IDeviationTasks';
 import styles from '../RejectTasks/RejectTasks.module.scss'
+import Tooltip from '../Tooltip';
 
 export interface IComponentProps {
   structureData: DeviationTasks[]
@@ -118,6 +119,12 @@ export default class DeviationTaskTable extends React.Component<IComponentProps,
 
   private _cell(value:string,length:any,className:string,row?:boolean,): JSX.Element {
 
+    if (className === 'Departments') {
+      return (
+        <tr><td rowSpan={length} ><Tooltip tooltipText={value}><div><span>{value}</span></div></Tooltip></td></tr>
+      )
+    }
+
     return  (
       <tr><td rowSpan={length} ><div><span>{value}</span></div></td></tr>
     ) 
@@ -132,7 +139,7 @@ export default class DeviationTaskTable extends React.Component<IComponentProps,
     }
 
     return  (
-      <tr style={ {height:"25px"}}> 
+      <tr> 
         <td className={styles[critClassName]}><div><span>{membersValue}</span></div></td >
         <td className={styles[critClassName]} style={{textAlign:"center"}}><div><span>{countValue}</span></div></td >
       </tr>

src/webparts/summaryWebPart/components/Tooltip/index.tsx

@@ -0,0 +1,17 @@
+import { Component } from "react";
+import * as React from "react";
+import styles from './styles.module.scss';
+
+export default class Tooltip extends Component<{ tooltipText: string }> {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className={styles.tooltip}>{this.props.children}
+                <span className={styles.tooltiptext}>{this.props.tooltipText}</span>
+            </div>
+        )
+    }
+}

src/webparts/summaryWebPart/components/Tooltip/styles.module.scss

@@ -0,0 +1,46 @@
+/* Tooltip container */
+.tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+  }
+  
+  /* Tooltip text */
+  .tooltip .tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 6px;
+  
+    /* Position the tooltip text */
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+  
+    /* Fade in tooltip */
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  
+  /* Tooltip arrow */
+  .tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+  }
+  
+  /* Show the tooltip text when you mouse over the tooltip container */
+  .tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }