feat: full title of download item on hover with tooltip (#3296)

Co-authored-by: Ryan Cohen <ryan@sct.dev>

src/components/ManageSlideOver/index.tsx

@@ -1,6 +1,7 @@
 import Button from '@app/components/Common/Button';
 import ConfirmButton from '@app/components/Common/ConfirmButton';
 import SlideOver from '@app/components/Common/SlideOver';
+import Tooltip from '@app/components/Common/Tooltip';
 import DownloadBlock from '@app/components/DownloadBlock';
 import IssueBlock from '@app/components/IssueBlock';
 import RequestBlock from '@app/components/RequestBlock';
@@ -144,20 +145,24 @@ const ManageSlideOver = ({
             <div className="overflow-hidden rounded-md border border-gray-700 shadow">
               <ul>
                 {data.mediaInfo?.downloadStatus?.map((status, index) => (
-                  <li
+                  <Tooltip
                     key={`dl-status-${status.externalId}-${index}`}
-                    className="border-b border-gray-700 last:border-b-0"
+                    content={status.title}
                   >
+                    <li className="border-b border-gray-700 last:border-b-0">
                       <DownloadBlock downloadItem={status} />
                     </li>
+                  </Tooltip>
                 ))}
                 {data.mediaInfo?.downloadStatus4k?.map((status, index) => (
-                  <li
+                  <Tooltip
                     key={`dl-status-${status.externalId}-${index}`}
-                    className="border-b border-gray-700 last:border-b-0"
+                    content={status.title}
                   >
+                    <li className="border-b border-gray-700 last:border-b-0">
                       <DownloadBlock downloadItem={status} is4k />
                     </li>
+                  </Tooltip>
                 ))}
               </ul>
             </div>