Title hover for truncated text

platform/ui/src/components/StudyListTable/StudyListTableRow.js

@@ -35,22 +35,20 @@ const StudyListTableRow = props => {
                   onClick={onClickRow}
                 >
                   {row.map((cell, index) => {
-                    const { content, gridCol, name } = cell;
+                    const { content, title, gridCol, name } = cell;
 
                     return (
                       <td
                         key={name}
                         className={classnames(
-                          'px-4 py-2 text-base',
+                          'px-4 py-2 text-base truncate',
                           { 'border-b border-secondary-light': !isExpanded },
                           `w-${gridCol}/24` || ''
                         )}
                         style={{
                           maxWidth: 0,
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
                         }}
+                        title={title}
                       >
                         {index === 0 && (
                           <Icon
@@ -83,6 +81,8 @@ StudyListTableRow.propTypes = {
       PropTypes.shape({
         key: PropTypes.string.isRequired,
         content: PropTypes.node.isRequired,
+        /** Title attribute to use for provided content */
+        title: PropTypes.string,
         gridCol: PropTypes.number.isRequired,
       })
     ).isRequired,

platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx

@@ -165,11 +165,13 @@ function StudyListContainer({ history, data: studies }) {
         {
           key: 'patientName',
           content: patientName,
+          title: patientName,
           gridCol: 4,
         },
         {
           key: 'mrn',
           content: patientId,
+          title: patientId,
           gridCol: 2,
         },
         {
@@ -182,21 +184,25 @@ function StudyListContainer({ history, data: studies }) {
               <span>{moment(studyTime).format('hh:mm A')}</span>
             </div>
           ),
+          title: 'time',
           gridCol: 5,
         },
         {
           key: 'description',
           content: studyDescription,
+          title: studyDescription,
           gridCol: 4,
         },
         {
           key: 'modality',
           content: modalities,
+          title: modalities,
           gridCol: 3,
         },
         {
           key: 'accession',
           content: accessionNumber,
+          title: accessionNumber,
           gridCol: 4,
         },
         {
@@ -213,6 +219,7 @@ function StudyListContainer({ history, data: studies }) {
               {instances}
             </>
           ),
+          title: instances,
           gridCol: 4,
         },
       ],